Opened 15 years ago
Closed 15 years ago
#3958 closed Bug (invalid)
Creating more than one instance during runtime kills the former instances
| Reported by: | hebuiss42 | Owned by: | |
|---|---|---|---|
| Priority: | Normal | Milestone: | |
| Component: | General | Version: | 3.0 RC |
| Keywords: | Cc: |
Description
Browser: Firefox 3.5 OS: Windows XP
Version fo CKEditor: 3.0 RC
I have a page with one editor instance. When clicking a button, I want to add another editor instance. This is being done by inserting new textareas via JavaScript and then replacing them via "CKEDIOTR.replace([name of textarea])".
This does work fine when creating only one new editor instance. But when I want to create one more editor instance, this new editor works fine, but the editor being created before this editor does not work anymore. Not working anymore means that only the editor's control buttons and theme are visible but the white input area is missing completely. In Firefox' error console the error "i.contentWindow is null" (file ckeditor.js line 18) is being shown.
Demo source code:
<html>
<body>
<input class="Button" type="button" value="New Editor" onClick="javascript:addEditor()" /><input class="Button" type="button" value="New Editor (Alternative)" onClick="javascript:addEditorAlt()" /><br />
<textarea name="editor_0" id="editor0" cols="70" rows="3"></textarea>
<div id="area" style="border:thin solid black;">this is a div</div>
<script type="text/javascript" src="./script/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
<!--
var editorInstances = new Array();
editorInstances[0] = CKEDITOR.replace('editor_0');
editorCount = 0;
function addEditor() {
editorCount += 1;
area = document.getElementById("area").innerHTML + '<br /><textarea name="editor_'+editorCount+'" id="editor_'+editorCount+'" cols="70" rows="3"></textarea>';
document.getElementById("area").innerHTML = area;
CKEDITOR.replace('editor_'+editorCount);
}
function addEditorAlt() {
editorCount += 1;
area = document.getElementById("area").innerHTML + '<br /><textarea name="editor_'+editorCount+'" id="editor_'+editorCount+'" cols="70" rows="3"></textarea>';
document.getElementById("area").innerHTML = area;
for (i = 1; i < editorCount; i++){
alert("destroying editor "+i);
editorInstances[i].destroy();
alert("editor "+i+" successfully destroyed");
editorInstances[i] = 0;
}
editorInstances = new Array(); //reset collection of editor instances
for (i = 1; i <= editorCount; i++){
alert("creating editor "+i);
editorInstances[i] = CKEDITOR.replace('editor_'+i);
alert("destroying editor "+i);
editorInstances[i].destroy();
alert("editor "+i+" successfully destroyed");
editorInstances[i] = CKEDITOR.replace('editor_'+i);
}
}
-->
</script>
</body>
</html>
When clicking on the first button, a new editor is being added. After the second click, one can see that only the very first and last editors work properly but the ones in the middle do not work any more.
I tried to implement an alternative in function "addEditorAlt" - but this doesn't work either. Basicly, it saves all the opened editor instances into an arry and before creating a new one, it tries to destroy all the old ones.
You are writing the innerHTML of the container, so all the content inside of it is recreated.
To start understanding your problem just test your code without any reference to CKEditor:
<!DOCTYPE HTML> <html> <body> <input class="Button" type="button" value="New Editor" onClick="addEditor()"> <br> <div id="area" style="border:thin solid black;">this is a div</div> <script type="text/javascript"> <!-- editorCount = 0; function addEditor() { editorCount += 1; area = document.getElementById("area").innerHTML + '<br><textarea name="editor_'+editorCount+'" id="editor_'+editorCount+'" cols="70" rows="3"></textarea>'; document.getElementById("area").innerHTML = area; } --> </script> </body> </html>Add a textarea, put some text and then try to add a new one. As you see there's no CKEditor involved and you have lost all your data.