We are trying to extend CKEditor via a "Comments" plugin, so that our content team can collaborate on writing content. Essentially, users can add comments to sections of selected markup (in the WYSIWYG editor) which manifest in the form of spans which enclose the markup selection. The comment is stored in the title attribute and displayed on rollover using the Jquery Tools Tooltip.
Unfortunately, when users try to edit source, the bound attributes are written as jquery variables (i.e. jquery12423592098570="834"). I tried to add unbind() to the Source Mode button click, but it looks like the markup is bound and written to a cache before the button click.
Additionally, when switching back from Source Edit mode to WYSIWYG, the markup is re-rendered and my binds are lost, and I don't know what event in CKEditor to re-bind on. Here's my code:
var editor = CKEDITOR.instances.editor1;
editor.on("instanceReady", function () {
//This is the initial bind
var frameDOM = $('iframe').contents();
$('.comment', frameDOM).tooltip({ events: { def: "mouseover,mouseout", input: "focus,blur", widget: "focus mouseover,blur mouseout", tooltip: "mouseover,mouseout" }, position: "top right", offset: [400, 0] });
//this is the event i thought i could re-bind to when switching back to WYSIWYG
$('iframe').onload(function () {
$('.comment', frameDOM).tooltip({ events: { def: "mouseover,mouseout", input: "focus,blur", widget: "focus mouseover,blur mouseout", tooltip: "mouseover,mouseout" }, position: "top right", offset: [400, 0] });
});
});
//This is the event I thought I could unbind on
editor.on('mode', function () {
var frameDOM = $('iframe').contents();
if (editor.mode == 'source') {
$('.comment', frameDOM).unbind();
} else {
$('.comment', frameDOM).tooltip({ events: { def: "mouseover,mouseout", input: "focus,blur", widget: "focus mouseover,blur mouseout", tooltip: "mouseover,mouseout" }, position: "top right", offset: [400, 0] });
}
});
HELP!!!