I am adding a rich editor component which uses ckeditor to an existing component set in my project, which has a tight timeline. I am able to use CKEDITOR.replace without any problems when I am doing the initial page load, but when the component is loaded dynamically via ajax, it only shows the text area in IE (8.0.6001.18702). In FireFox (3.6.13), it loads properly.
The loading mechanism is used extensively loading content generated from other components, which also contain script tags. These components all operate properly.
The following example shows what I am trying to accomplish, which is to have a standard block of html which will reliably render a ckeditor when dynamically added to the page. I have replaced the AJAX call to make the example more self contained.
The exception thrown is:
[CKEDITOR.editor.replace] The element with id or name "testeditor" was not found.
I had previously encountered errors that CKEDITOR was undefined when the script tag including ckeditor.js was part of the dynamically added content. Also an error that window.parent.CKEDITOR.tools was undefined (from plugins/wysiwygarea/plugin.js) which I can no longer reproduce.
While I would prefer a solution similar to the example above, at this point anything that can be loaded in the content being set to innerHTML will be appreciated since it will at least get the job done.
The loading mechanism is used extensively loading content generated from other components, which also contain script tags. These components all operate properly.
The following example shows what I am trying to accomplish, which is to have a standard block of html which will reliably render a ckeditor when dynamically added to the page. I have replaced the AJAX call to make the example more self contained.
The exception thrown is:
[CKEDITOR.editor.replace] The element with id or name "testeditor" was not found.
<html>
<body>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function writeCKE() {
var s = '<textarea id="testeditor" name="testeditor" >this is a test</textarea>';
s += '<script defer="defer" type="text/javascript">alert(\'replacing\');';
s += 'var o = CKEDITOR.instances[\'testeditor\']; ';
s += 'if(o) { CKEDITOR.remove(o); } ';
s += 'CKEDITOR.replace(\'testeditor\');<\/script>';
var tarNode = window.document.getElementById('dyncontainer');
var newNode = tarNode.cloneNode(false);
newNode.innerHTML='<span style="display:none;">a</span>'+s;
tarNode.parentNode.replaceChild(newNode, tarNode);
}
</script>
<a href="#" onclick="writeCKE();">test</a><br />
<form>
dynamic child<br />
<span id="dyncontainer">
</span>
<input type="submit" />
</form>
</body></html>
I had previously encountered errors that CKEDITOR was undefined when the script tag including ckeditor.js was part of the dynamically added content. Also an error that window.parent.CKEDITOR.tools was undefined (from plugins/wysiwygarea/plugin.js) which I can no longer reproduce.
While I would prefer a solution similar to the example above, at this point anything that can be loaded in the content being set to innerHTML will be appreciated since it will at least get the job done.
Re: using innerHTML to load content that includes a ckeditor
Try to first insert the node in the document and then change its innerHTML.
Re: using innerHTML to load content that includes a ckeditor