How to programmatically determine CKEditor instance name

Question

I added a CKEditor instance programmatically to my page in the code of my ASP.NET page:

VB.NET:

itemEditor = New CkEditor cell.Controls.Add(itemEditor) 

... which works great. I can get the HTML in the postback and do something with it.

However, I also want to do some client things with it, in particular, pull the selected item out of another control and insert it into the text by processing the onchange event.

So, how can I get the editor instance name in JavaScript so that I can do things like:

 function GetCkText() { var htmlFromEditor = CKEDITOR.instances['editorName'].getData(); // do stuff with htmlFromEditor } 

Answer 1

Assuming you have only one editor instance:

 for ( var i in CKEDITOR.instances ){ var currentInstance = i; break; } var oEditor = CKEDITOR.instances[currentInstance]; 

Here's what the JavaScript API says about instances .

Here is another way to define CKEditor. Here 'fck' is the id input fields:

 CKEDITOR.replace( 'fck', { customConfig : prefix + 'js/ckeditor/config.js', height: 600, width: 950 }); editor = CKEDITOR.instances.fck; 

Notice how I can reference an instance using .fck .

Answer 2

The following code:

 var allInstances=CKEDITOR.instances; for ( var i in allInstances ){ alert(allInstances[i].name); } 

works great for me.

Answer 3

If you have only one instance and you do not know its name.

 CKEDITOR.instances[Object.keys(CKEDITOR.instances)[0]].getData() 

Answer 4

Well, I found a way ... but I don't like it ...

I added a hidden field control to the page after adding the editor and placed the ClientId editor in its value:

 Dim hdn As New HiddenField With hdn .ID = "HiddenField" .Value = itemEditor.ClientID End With cell.Controls.Add(hdn) 

.. and then in JavaScript I can get the hidden field and therefore the name of the editor as follows:

 function GetCkText() { var hdn = document.getElementById("HiddenField"); var editorName = hdn.getAttribute("value"); var editor = CKEDITOR.instances[editorName]; alert(editor.getData()); return false; } 

But it's a little inelegant, to say the least. Has anyone got a better way?

Answer 5

If you use CKEDITOR.appendTo(...) , keep in mind that ckeditor creates the internal name of the instance. Therefore, you can request this name immediately after creating it, then save it somewhere and use it later.

 var lvo_editor = CKEDITOR.appendTo( "my_div" , null , lvs_html ) ; my_global_var = lvo_editor.name ; 

by the way: the CKEDITOR.replace(...) method allows you to determine the instance name (see answer above)

Answer 6

If you need an instance from the plugin , at least in version 4+, you can do this.

 CKEDITOR.currentInstance 

Here I want to find out the name of the text field that I applied ckeditor to.

 CKEDITOR.currentInstance.name