How do I add a placeholder attribute to an instance of CKEditor?

Question

Right now, using Alfonso's plugin , I'm able to add the placeholder attribute in config.js. However, since I'm adding into config.js, that means all instances will have the same placeholder text, right?

Well, I don't want all instances of my ckeditor to have the same placeholder text because I also noticed he also said :

The value can be set in the configuration or as an attribute of the replaced element

I figured this means that we can put "Type something..." as placeholder text for ckeditor1 and "Blabla..." as placeholder text for ckeditor2. How do I do that? Or that's not what he meant?

I have tried several ways including

    var ckeditor = CKEDITOR.replace('ckeditor1');
    ckeditor.placeholder = 'Type sometheing....';

and

    var config = [];
    config['placeholder'] = 'some value'; //or config = [{placeholder:'some value'}]
    CKEDITOR.replace("myeditor" , config );

inside that particular page but to no avail... I've also cleared my cache.

Answer 1

By an attribute I meant:

<textarea name="editor" placeholder="Type here..."></textarea>

with regards to your other approaches, the configuration is an object, so this should work:

var config = {};
config.placeholder = 'some value'; 
CKEDITOR.replace("myeditor" , config );

Answer 2

The CKEditor object has an attribute called instances which stores all instances. To save an instance, you just add it to the instances hash.

var someDomElement = X;
CKEDITOR.replace(someDomElement);
CKEDITOR.instances[someDomElementId];

var someOtherDomElement = Y;
CKEDITOR.replace(someOtherDomElement);
CKEDITOR.instances[someOtherDomElementId];

Now you have two instances. You can now set or do anything to/with that instance with the standard API.

CKEDITOR.instances[someDomElementId].CKEDITOR_API()

Answer 3

Something quick that might be helpful for others. I struggled getting this plugin work as well. The reason was I was using an old version of the plugin. I downloaded it from here: https://ckeditor.com/cke4/addon/confighelper and that page might confuse others too.

Almost all of the plugins from CKEditor show the most recent version on the top of the download list. Also when clicking the "Download" button it typically downloads the newest version of the plugin. That is not the case with this plugin. "Download" gets the oldest version and the oldest version is also listed first in the list.

A "Gotcha" worth mentioning I think

Answer 4

The placeholdertext plugin seems to be a nice solution. Contrary to the ConfigHelper plugin, a placeholder text doesn't get into undo/redo history.

Answer 5

According to Alfonso's site the correct way would be:

config['placeholder'] = 'some value';
CKEDITOR.replace("myeditor" , config );