Firefox' built-in PDF viewer, PDF.js, has a mozdisallowselectionprint attribute on the <html> tag. What does this attribute do?
The mozDisallowSelectionPrint attribute was added to Firefox to allow web pages to disable the print selection option in Firefox.
Normally, when you select text in a document and then open the print dialog (Ctrl + P or Cmd + P), you can choose the option "Selection" under "Print range".
Because of the way PDF.js works, selecting this option when viewing a PDF document would either result in empty pages being printed or, for large documents, a browser crash.
In bug 830278 it was therefore decided to allow web pages, including the PDF viewer, to disable the option to print selections by adding this attribute to the HTML tag..
(source: broward.edu)
mozDisallowSelectionPrint is available from Firefox 19 and onwards.
Related
Using Chrome, I can get the path to an element. I select "View source" and then right-click on the relevant item and say "get XPath".
In Safari, I can view the source, and when my cursor's on an element in the source, I can see the xpath visually displayed as a list of elements.. but I can't find a way to get the text for that xpath. Surely there's some way (he said optimistically).
This turns out to be easy, and I don't know why I didn't see it. In Windows at least:
Ctrl-U to display page source (or right-click on the page and click "View page source" in the popup menu).
In the page source, right-click on the element you like; in the resulting popup, click the "Copy >" option
Select "Copy XPath" from the resulting nested popup.
See picture below for an illustration. Everything was done with right-clicks.
Kinda late with an answer, but you might want to consider ios-webkit-debug-proxy by google.
Here is a good Extension for Safari and Google Chrome:
https://github.com/sergeche/xmlview#readme
Safari Extension: http://files.chikuyonok.ru/xv/xv.safariextz
Google Chrome Extension: download
Current features
Collapsable elements: Alt+click to expand/collapse all descendant elements
Outline for better document overview
Search by name or XPath. By default uses simple search mode which looks for a partial match in element‘s or attribute’s name; use special symbols like ‘/’ or ‘[’ to search by XPath
Quick XPath mode: hold down Command (Mac) or Ctrl (PC) key while moving mouse cursor over element‘s or attribute’s name to enter Quick
XPath mode. Use Shift key to cycle through available XPath variants
and then drag’n’drop element under cursor into text editor. Google
Chrome users: click on element will copy XPath to clipboard
I am using CKEditor 4.4.5.
Users use the text colour icon to change the colour of a word which works fine. When one checks the underlying HTML, it shows:
<p><span style="color:#FF0000">test </span></p>
However when clicks the "source" icon again to return to the standard non HTML view, the colouring has gone, although the underlying HTML is still correct. If you take this HTML and render it in a browser it will work correctly. So it seems that CKEditor is not able to render text colour correctly, unless freshly changed using the text colour icon.
We had customers thinking that the colour had not changed, and then trying to fix the issue in the HTML, which resulted in the total corruption of the HTML due to human error.
Is this a bug, or am I missing something?
Thanks.
As for CKEditor it might so happen that Advanced Content Filter will strip undesired tags / attributes.
If you don't have colorbutton plugin, CKEditor will strip this span (see standard demo).
You have 2 simple solutions:
Add colorbutton plugin.
Simply add to your config:
config.extraPlugins = 'colorbutton';
Add ACF proper rule.
config.extraAllowedContent = 'span{color}';
For more informations about ACF see Content Filtering (ACF).
I am trying to implement CKEditor v4.3.2. The way our product is set up is there are multiple areas of our pages that can be edited - we open an editor in a modal window and use the iframe method for editing. It works great with one exception:
If the page DOM looked something like "body > div#container > div > div#editcontent"
and there was CSS rules targeting that DOM then the CSS does not apply in the editor because the editor DOM is simply "body"
What I would LIKE to do is supply the editor with the HTML DOM Structure of the page that holds the editor so the ContentCSS rules that normally impact the div would still apply (e.g. white background in the div instead of background color from the body tag)
I am at a loss for how to accomplish this.
Thanks!
If you want the content of editor to inherit styles of your page, so a full integration with all the styles applied with every kind of selector, then you would have to use inline editing. Only inline editing offers that.
When using classic editor (the one using iframe) you still have an option though. It's the config.bodyClass setting which lets you assign a class to the body element into which contents is loaded. Then, if all your contents styles selectors starts with that class and a stylesheet is loaded using the config.contentsCss setting, the content inside editor will look similarly to your final page.
I'm using the Firefox DevTools and I'm using the Inspector tab, in which it displays the HTML tree.
When I use the Search HTML feature, it only searches tags. So suppose I have this:
<div class="lol">textinsidediv</div>
And when I search for 'div', it returns the <div> accordingly. However, if I search for 'textinside' it doesn't match the text inside the content despite the fact that it's starting right there.
My question: How can I search for any arbitrary string within this HTML tree?
(In contrary Firebug performs a simple text search just as expected.)
The search in the Inspector panel of the Firefox DevTools allows to search for text content since Firefox 45 (see bug 835896).
Btw. since Firebug 2.0 you're also able to search in the HTML panel using CSS selectors (additionally to the plain text search).
It is not some really useless html tag search, it actually searches CSS selectors (same as what you use with css, querySelector in Javascript, or jQuery selector)
So you can search #id, go through all elements of a certain class by searching .class, you can even search for all elements with attribute including text, for example [class*="o"] should give all elements with letter o in class attribute. This is helpful for what designers/developers want to find - to find text, you can Ctrl+F within the page, then right click, inspect element.
A good idea is to Copy Inner HTML but even better is Edit As HTML. That brings up an in-place panel displaying the full text, and it can be searched with Ctrl+F or cmd+F.
Ctrl+G to find next, Ctrl+Shift+G to find previous.
Workaround: in the inspector, right-click the outermost tag, then click 'Copy Inner HTML'. Paste in a word processor and search there.
This is now fixed as of FireFox 45...
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching
See answer.
As an alternative to searching within dev tools...
Right click on the page anywhere
Select View Source
Within the source view you can easily perform a text search by doing a ctrl/f or cmd/f if on a mac.
I've added the "html"-button to TinyMCE on an EZ Publish site so that the users can write custom html into the xmlblock-field. But html-code with div-, img- and other tags get stripped when the user saves. If I use the ''-tag I assume that the html-code inside will be rendered as viewable html-code on the web page, instead of actual html-content.
How can I enable html-editing in the ezoe?
This is what I'm trying:
Click the html-button in TinyMCE.
Write html-code:
<div style="text-align:left; width:496px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_fottoey" src="some url.jpg" width="496" height="249" alt="" />
</div>
Click "Publish". When viewing the page it has no trace of the html-code from step 2.
I've tried to add the following to my override content.ini.append.php:
[literal]
AvailableClasses[]
AvailableClasses[]=html
as per http://acidre.com/blog/ez-publish-saisir-du-contenu-directement-en-html/ but that doesn't help.
Update:
It works now with the changes that I made to content.ini.append.php. This change adds "html" as a literal option and gives you a new icon in the editor, which Nicolas pointed me to (looks like a sheet of paper and is on icon row 2, first section before the Omega-icon.
When you add the html-source in the purple edit field, the editor will create links if it discovers that you've pasted inn urls. These links are blue in the editor. You must break these links with the "Break link"-icon to the far right on icon row 1. There should be no blue hyperlinks in the editor when you save. If you've managed this, the published page should display your custom html nicely :)
The usual way of enabling literal HTML in eZ Online Editor (based on TinyMCE) in eZ Publish is to uncomment the
AvailableClasses[]=html
configuration directive in an override of content.ini. A bit more of information here : http://share.ez.no/forums/setup-design/custom-tag-stop-while-running/comment64177.
Then, the literal tag should be available to editors through the literal button in TinyMCE (this button looks like a text sheet). The dropdown proposed in the pop-up menu shows 'html'.
Allowing raw html requires a few editorial guidelines and full trust in editors, but i am sure you are aware of this.
Cheers,
Nicolas