I've been trying to implement a richtext editor using an iframe.
I've got a little help from the following for the script that inserts html at the cursor/selection:
from Insert html at caret in a contenteditable div
All in fine on Chrome and FF, but IE (using IE10 at the mo - but same result in earlier verion modes) fails at:
range.insertNode(frag);
Giving the follwing error:
SCRIPT5022: WrongDocumentError
I found the following link detailing the error:
http://msdn.microsoft.com/en-us/library/windows/apps/hh453166.aspx
However I am at a loss to know how to work round the error.
Any help would but appriciated...
Your code is running in the context of the main window, but you are trying to reference window and document of the iframe. Replace any references to "document" with "element.ownerDocument" and "window" with "element.ownerDocument.parentWindow" (where "element" is the element that you have added contenteditable to).
Something like this:
var selection = window.getSelection(); // Wrong.
var selection = element.ownerDocument.parentWindow.getSelection(); // Correct.
var frag = document.createDocumentFragment() // Wrong.
var frag = element.ownerDocument.createDocumentFragment() // Correct.
I (kind of) solved it by adding <meta http-equiv="x-ua-compatible" content="IE=8">. This caused the script to follow the false branch of if(e.getSelection){...}, reverting to the older createRange() method.
Related
I have an tinymce editor in admin area where I want to use script tag. With using follows, I am able to use tag and save it. After that I can see it in database as saved. But the problem is that when I edit the same page again and the editor preloaded with content then it stripped the tag somehow. So I can not see it and edit it again.
valid_children : '+body[style],+body[script]',
extended_valid_elements : '*[*]',
So please let me know if there is any way I can stop these script tag stripping off. I have tried to consol log the editor.getContent() but it also show content without tag whereas I can see it in DB and frontend source.
Thanks
You are likely getting tripped up by trying to load the closing script tag as part of a string in JavaScript itself.
If you have a closing script (</script>) tag in a JavaScript string the interpreter is likely interpreting that as the closing of your script block and not part of the content in the string. In many cases this will simply break the page's JavaScript completely.
Here is an example in TinyMCE Fiddle that shows the correct way to pass a </script> tag in a string: http://fiddle.tinymce.com/Fvhaab
For example:
tinymce.editors[0].setContent(`
<p>This is NEW content in TinyMCE!</p>
<script>
var x = "test";
var y = 10;
</script>
`);
...will not work. If you use this attempt for the closing script tag you will see the editor does not appear at all as that closing script tag prematurely ends the entire section of JavaScript.
Instead you can escape the / in the closing script tag:
tinymce.editors[0].setContent(`
<p>This is NEW content in TinyMCE!</p>
<script>
var x = "test";
var y = 10;
<\/script>
`);
...and you will see that the script is loaded into TinyMCE as you would expect.
I'm using the IE8 debugger to fix a script that works great in FF 3.16 and Chrome 12.0, but doesn't work for beans in IE 8.0 or Safari 5.0. The spot in the script that's giving me trouble is here:
I need to find the number of <td>s in the the table id="main_tbody" whose children[0] is the first row of data. Both FF and Chrome understand this perfectly; IE 8 and Safari 5 do not.
I want to look at the DOM tree in the IE 8 debugger to see what's going on. But I can't find the ding-dong DOM, dang it!
So: where is the DOM in the IE 8 debugger?
Alternatively <ahem!>: what's wrong with my JS code?
Thanks!
EDIT: I should have said that the table is set up like this:
<table id ="main">
<tbody id="main_tbody">
And references to table id ="main" and tbody id="main_tbody" are initialized this way:
main = getRefToDiv( 'main' );
main_tbody = getRefToDiv( 'main_tbody' );
Call the position_col_heads() function after your </body>
My suspicion is that this function is declared inside the head tag or being called before the browser renders the body content.
Just try this.
...
...
</body>
<script type='text/javascript'>
position_col_heads();//Set breakpoint here and see if its accessible.
</script>
</html>
Also, see what response you get for main.children[0] and main_tbody.innerHTML in your watch expression.
Unbelievable. According to quirksmode, ie8 fails to implement childElementCount and I believe it because that's the thing that's coming back == 'undefined'. So I'll rewrite my loop with a new exit condition. That sucks, because now I'm going to get all children, including comments and everything else, not just the elements I was looking for. Incredible. FYI, ie8 also does not implement firstElementChild, lastElementChild, nextElementSibling, or previousElementSibling.
i got a (hopefully) simple problem with a Code Template on Eclipse. I try to use a Code Template to surround a word with somehing. The Replacement is nearly successful, but i have a problem with handling the selected word.
My task is to select "save " on this example
<button type="submit">save</button>
and want to have
<button type="submit"><?= $this->_('save') ?></button>
The problem is, that i got this after replacement
<button type="submit">save<?= $this->_('save') ?></button>
Is there a possibility to remove the selected word after using a code template? I am thankful for every help i get. Smile
I forgot, the template looks like this:
<?= $$this->_('${word_selection}') ?>${cursor}
Maybe this question is somewhat old, but I came across the same idea in Java for adding String constants by simply typing the desired name and then replace it with a template, like this for example:
type VALUE and get it replaced with private static final String VALUE = "VALUE";
I use eclipse 3.6 and got it working with the following template:
private static final String ${word_selection} = "${word_selection}";
Then I do the following steps:
type VALUE
select it by double-clicking and hit CTRL+SPACE
enter first few chars for the template name in the opened proposal pop-up and select the template (see image below)
hit ENTER
And the result is this:
Maybe this is helpful.
Using templates and the ${line_selection} or ${word_selection} variables, Eclipse (Helios, 3.6.1 here) always seems to insert the rendered template after the text you initially selected.
I've experienced this myself (in the HTML editor) while trying to implement a similar 'Surround with Tag' template, and gave up and reverted to using Ctrl+1 (after selecting text), and using 'Surround with new element...'. Unfortunately this workaround doesn't help you much w/ PHP.
Possible bug report?
I also faced the same problem in jsp page. I resolved this issue by using 4 or more characters to select the template in eclipse. And I got the correct result.
I have a problem with my firefox extension
I have a XUL popup panel with a hbox for the tag cloud, and a JS code to add divs to this hbox:
<hbox id="tag_base" ondblclick="alert('done')"/>
JS:
var root = document.getElementById('tag_base');
var tag = document.createElement('div');
tag.textContent = 'test';
root.appendChild(tag);
var rect = tag.getBoundingClientRect()
alert(rect.top)
I need to get the dimensions of each added div, however, getBoundingClientRect simply refuses to work.
If I remove alerts, it's always zero.
With alerts the story is different:
The first time the alert is called it returns zero, although the div appears on the screen.
Any subsequent alerts return the correct coordinates.
If I set a breakpoint in Chromebug, everything is reported correctly.
If I do not interupt the execution in any way, and run a loop, only zeroes got returned.
This has got me quite confused.
Calling "boxObject" produces the same results, while "getClientRects[0]" is undefined on the first call.
Any hints on what might be causing this will be greatly appreciated.
Note :
Caution, if you use getBoundingClientRect with an element which has display:none then it will return 0, anywhere in the dom.
Although I can't find any documentation on this seemingly fundamental issue, the problem you noticed is most likely because the layout (aka "reflow") process has not yet run by the moment you ask for the coordinates.
The layout/reflow process takes the page's DOM with any styles the page has and determines the positions and dimensions of the elements and other portions of the page (you could try to read Notes on HTML reflow, although it's not targeted at web developers and probably is a bit outdated).
This reflow process doesn't run synchronously after any change to the DOM, otherwise code like
elt.style.top = "5px";
elt.style.left = "15px";
would update the layout twice, which is inefficient.
On the other hand, asking for elements position/dimension (at least via .offsetTop) is supposed to force layout to return the correct information. This doesn't happen in your case for some reason and I'm not sure why.
Please create a simple testcase demonstrating the problem and file a bug in bugzilla.mozilla.org (CC me - ***********#gmail.com).
My guess is that this is related to XUL layout, which is less robust than HTML; you could try creating the cloud in an HTML doc in an iframe or at least in a <description> using createElementNS to create real HTML elements instead of xul:div you're creating with your current code.
Be sure the DOM is ready. In my case, even when using the getBoundingClientRect function on click events. The binding of the events needed to happen when the DOM is ready.
Given the element of a table found with getElementById(), I need to get the body element and add a row to it. This fails in Chrome:
var tabBody = expressionTable.getElementsByTagName('TBODY')[0];
but works in IE.
How can I get the body in all browsers (ie 8, Chrome, FF, and Safari)?
The code looks like this:
var expressionTable = document.getElementById(tableID);
var tabBody = expressionTable.getElementsByTagName('tbody')[0];
var expressionRow = createExpressionRow(FieldTagsValue, row);
tabBody.appendChild(expressionRow);
tabody is 'undefined'
I think it might be because the table starts empty, and Chrome does not have a tbody element for an empty table. Could that be it?
Thanks,
Brian
don't rely on anything working in IE - it might behave slightly non-standard.
i would also advise not expecting tags You have not declared in Your HTML to be present in DOM.
i would try going with an explicit tbody tag if You do rely on it being present in DOM :
<table>
<tbody></tbody>
</table>
I know jQuery has some workarounds for handling tables (in IE) - so, unless You're patient to find out all the hacks Yourself, I would go with a library such as jQuery and add table elements like this :
$('#' + tableID).append(expressionRow);