I have multiple editable areas in a CMS.
When a user clicks on an editable class element, it gets replaced with a ckeditor. When its clicked a button also shows, when the button is clicked the content of the ckeditor gets posted via jquery ajax and saved in the database. On a successful call back the editor is destroyed and the original editable area get its html updated to the user changed code.
Here is my code:
The problem:
When the page first loads, I can click on all 5 of the editable areas with ease. They load and destroy when a new one is clicked on... however when I...
Click on the editable area
Ckeditor loads with button.
Change some text click the button - ajax jquery to server - callback destroys ckeditor and I see my html again
Then clicking on one of the editable areas and the ckeditor does not load.
Anyone offer any help?
When a user clicks on an editable class element, it gets replaced with a ckeditor. When its clicked a button also shows, when the button is clicked the content of the ckeditor gets posted via jquery ajax and saved in the database. On a successful call back the editor is destroyed and the original editable area get its html updated to the user changed code.
Here is my code:
var editor;
function replaceDiv(div, id) {
if (editor)
editor.destroy();
editor = CKEDITOR.replace(div);
}
$('.button').click(function() {
var id = $(this).attr('id');
SaveData(id);
});
$('.editable').click(function() {
if ($(this).attr('class') == "editable") {
var buttonId = $(this).attr('id').replace('e', '');
$('#' + buttonId).show();
replaceDiv(this, buttonId);
}
});
function SaveData(id) {
$.ajax({
type: 'POST',
url: '/Handler.ashx',
data: 'thedata=' + editor.getData() + '&id=' + id,
dataType: "text",
success: function(data) {
UpdateHtml(data, id);
},
error: function(msg, ts, errorThrown) { alert(ts); }
});
}
function UpdateHtml(html, id) {
alert('in update');
//remove editor
editor.destroy();
//remove button
$('#' + id).hide();
//update html
var editableArea = id + 'e';
$(editableArea).innerHtml(html);
}
The problem:
When the page first loads, I can click on all 5 of the editable areas with ease. They load and destroy when a new one is clicked on... however when I...
Click on the editable area
Ckeditor loads with button.
Change some text click the button - ajax jquery to server - callback destroys ckeditor and I see my html again
Then clicking on one of the editable areas and the ckeditor does not load.
Anyone offer any help?

Re: Is this a bug or is it me : A problem with CKEDITOR.repl
In the replace div I added:
try
{
if (editor)
editor.destroy();
}
catch(err)
{
alert(err.toString());
}
The error I get is:
TypeError: Cannot call method 'clearCustomData' of undefined
This suggests that the editor doesn't exist, well it doesn't. But isn't the if (editor) statement taking care of this?