How to programmatically determine name of CKEditor instance

Question

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

VB.NET:

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

... which works fine. I can get the HTML on the postback and do stuff with it.

However, I also want to do some client-side stuff with it, specifically take a selected item out of another control, and insert it into the text by handling the onchange event.

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

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

halfer · Accepted Answer · 2014-01-09 17:22:30Z

16

Assuming you only have one editor instance:

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

Here is what the JavaScript API says about instances.

Here is another way of defining the CKEditor. Here 'fck' is the input fields id:

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

editor = CKEDITOR.instances.fck;

Notice how I am then able to reference the instance using .fck.

edited Jan 9, 2014 at 17:22

halfer

20.2k20 gold badges111 silver badges208 bronze badges

answered Mar 30, 2010 at 14:36

mcgrailm

17.7k22 gold badges85 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ChrisA Over a year ago

Thanks, works fine - much less messing about. However, a question, if I may. As most of my work is .NET server-side (and I've done very little JS), I'm used to instance collections being collections of the objects themselves... whereas 'i' in your example here is the editor instance name. How would I know this - does this syntax imply a default property perhaps?

Peter Krauss Over a year ago

If you know is simple, the value of currentInstance is the HTML id of your editor textarea. Example currentInstance='editor1'.

dsdsdsdsd Over a year ago

is there a way to assign the instance name?? ... ... i tried CKEDITOR.appendTo( "my_div" , {name:"my_editor"}, my_string )

mcgrailm Over a year ago

@dsdsdsdsd see my edit i think that may satisfy your question

dsdsdsdsd Over a year ago

interesting ... that seems to NOT work for .appendTo ... but does work for .replace (as you showed)

denov · Accepted Answer · 2016-02-24 01:51:58Z

3

If you only have a single instance and you do not know the name of it.

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

answered Feb 24, 2016 at 1:51

denov

13k2 gold badges32 silver badges45 bronze badges

Comments

ppp · Accepted Answer · 2011-07-29 14:18:46Z

2

The following code:

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

works fine for me.

answered Jul 29, 2011 at 14:18

ppp

311 bronze badge

Comments

ChrisA · Accepted Answer · 2010-03-30 13:37:22Z

0

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

I've added a Hidden Field control to the page, after adding the editor, and put the editor's ClientId in its value:

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

.. and then in the JavaScript, I can get the hidden field, and hence the editor name 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 bit inelegant, to say the least. Anyone got a better way?

answered Mar 30, 2010 at 13:37

ChrisA

4,2235 gold badges33 silver badges44 bronze badges

Comments

dsdsdsdsd · Accepted Answer · 2013-12-12 22:20:30Z

0

If you are using CKEDITOR.appendTo(...), keep in mind that the ckeditor does create an instance name internally. So you can query for that name immediately after creating it, then store 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 define an instance name (see answer above)

answered Dec 12, 2013 at 22:20

dsdsdsdsd

2,9727 gold badges46 silver badges60 bronze badges

Comments

Valamas · Accepted Answer · 2015-07-15 22:25:24Z

0

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

CKEDITOR.currentInstance

Here I am wanting to know the name of the textarea I applied ckeditor on.

CKEDITOR.currentInstance.name

answered Jul 15, 2015 at 22:25

Valamas

24.8k25 gold badges111 silver badges182 bronze badges

Collectives™ on Stack Overflow

How to programmatically determine name of CKEditor instance

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related