CKEditor get selected editor

Question

I have a CMS system that displays two CKEditors side by side so that the user can edit the main body and sidebar content. Both editors share the same toolbar.

I have added a plugin to allow users to add embedded data into the editor. The only problem is I need the data to show on the currently selected editor, where the keyboard cursor is currently setting.

How do I use javascript or JQuery to get the CKEditor element that is currently selected before the button in pressed on the toolbar.

Right now I can only get it to work by directly selecting a specific editor instance.

CKEDITOR.instances.mtxDescription.insertHtml(data);

However I need to be able to have the data drop directly into whichever editor is selected

I am currently using 3.6. I can't upgrade to 4 because I need the shared toolbars between editors, which 4 does not currently support. — TroySteven, Jan 24 '13 at 17:13

score 1 · Answer 1 · answered Jan 24 '13 at 19:28

1

If you're creating a CKEditor plugin, then you already have a reference to the editor that it's active, check the basic tutorial about how to create a CKEditor plugin http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin

editor.addCommand( 'insertTimestamp',
    {
        exec : function( editor )
        {    
            var timestamp = new Date();
            editor.insertHtml( 'The current date and time is: <em>' + timestamp.toString() + '</em>' );
        }
    });

answered Jan 24 '13 at 19:28

AlfonsoML

12,634
2
46
53

If you reread his request and my reply above you might understand the problem better. We have lost the handle to the editor because of a loss of focus. Arguably we should be working very hard to try and retain focus within the plugin, but at least in my case it's not entirely possible to do. – kamelkev Jul 20 '13 at 02:25
Posted for more detail here: http://ckeditor.com/forums/CKEditor/Best-way-to-differentiate-editor-data-when-multiple-editors-are-in-used-via-shared – kamelkev Jul 20 '13 at 02:48
The answer I found at the above link is to use CKEDITOR.currentInstance – parker_codes Jan 17 '18 at 19:41

score 0 · Answer 2 · answered Jan 24 '13 at 17:15

0

I'd put a class on the editor wrapper at some level where unique IDs exist, then something like:

var myEditor = $(this).closest('.my-class').attr('id');

answered Jan 24 '13 at 17:15

isherwood

58,414
16
114
157

That didn't work, the item returned was just the editor closest to the button, not actually the selected editor. Is there a jquery function that gets me the dom object that is selected by the keyboard cursor? – TroySteven Jan 24 '13 at 17:36
Sure. I'd apply this code to a click event bound to the editor wrapper. – isherwood Jan 24 '13 at 17:39
Maybe you could explain why it's important that the editor be detected before the button click. http://jsfiddle.net/9MV2S/3 – isherwood Jan 24 '13 at 17:57
I was in a mood to fiddle, so I added some to this demo. http://jsfiddle.net/9MV2S/9 – isherwood Jan 24 '13 at 18:05
Thanks, I believe this might work, I might have to play around with it a little. Basically my editor setup follows this example: http://rev.ckeditor.com/ckeditor/trunk/7664/_samples/sharedspaces.html, multiple editors, one toolbar, I need to know which editor is the selected editor. I'm not sure the click event will work because I don't want anything to happen on click, I want to add an embed code when a user selects the embed code button in the toolbar. Which is a custom plugin I'm building. – TroySteven Jan 24 '13 at 18:49
I believe I may have fiqured it out. I think I need to do something like this: http://stackoverflow.com/questions/516152/how-to-select-an-element-that-has-focus-on-it-with-jquery – TroySteven Jan 24 '13 at 18:53
Yeah none of this is going to work right. You have to work through the API to detect and handle this issue properly – kamelkev Jul 20 '13 at 02:48

score 0 · Accepted Answer · answered Jan 24 '13 at 20:24

0

I was able to solve this issue by adding a blur event to each editor and storing the last id of the last time the event was called.

var currentEditorInstance = 'mtxDescription';   
for(name in CKEDITOR.instances) {
CKEDITOR.instances[name].on('blur', function () {
        currentEditorInstance = this.name;
});
}

answered Jan 24 '13 at 20:24

TroySteven

4,885
4
32
50

I have the same problem. There does not appear to be any way to iterate through all your CKEditor instances and see which one was last used. This clearly is necessary given the circumstance when multiple editors are being used. Right now I am forced to do the same thing you are doing. I have a custom plugin that loses focus, and once focus is lost there is no good way of determining the last active instance through which to return. – kamelkev Jul 20 '13 at 02:23

CKEditor get selected editor

3 Answers3