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.

Solution 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 );

Solution 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()

Solution 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

Comments

[Gianluigi 'A35G']

Try this solution: stackoverflow.com/questions/16558310/html5-like-placeholder

[MJB]

why don't you just add them to the specific instance?

[John Evans Solachuk]

@MJB and that's what I want to know...how?

[John Evans Solachuk]

@Gianluigi'A35G' the question is not how to add placeholder to ckeditor, it's how to add placeholder to AN INSTANCE of ckeditor.

[MJB]

I'll answer it in 2 minutes :)

[AlfonsoML]

Please, test both approaches as both should work and if there's anything wrong in my answer (I wrote it without testing anything), feel free to fix or enhance it.

[John Evans Solachuk]

I tested the second one before accepting this as an answer. I'll try the first...and...yes, it works too! :)

[John Evans Solachuk]

thanks but a lot of overhead. I prefer the plugin author's answer. ;)

[MJB]

It's actually not overhead if you have multiple instances, and as you said yourself, you have multiple instances. Quote:"Well, I don't want all instances of my ckeditor to have the same placeholder text because I also noticed he also said..." this is the way to configure your instances independently from each other.

[Vishal]

@AlfonsoML i tired both example.. not working for me . :(

[Vishal]

@AlfonsoML i have this code CKEDITOR.editorConfig = function( config ) { config.linkShowAdvancedTab = false config.linkShowTargetTab = false config.enterMode = CKEDITOR.ENTER_BR config.autoParagraph = false config.removePlugins = 'elementspath'; config.smiley_columns = 6; config.fillEmptyBlocks = false; config.placeholder = 'some value';

[AlfonsoML]

Please, create a live demo so we can check your code instead of trying to guess what's missing there (at the very least, that code should give a JS error because the function isn't closed)

[Vishal]

@AlfonsoML here aczatly what i want drupal.stackexchange.com/questions/126486/… but i didnt get the answer

[AlfonsoML]

In the jsfiddle demo you're not loading my plugin, so I really wonder how do you expect it to work....

[Vishal]

@AlfonsoML i am working on ROR and i am using gem for ckeditor. i simply write $('.ckeditor').ckeditor({ // $('.ckeditor').ckeditor(); }) for loading ckeditor. and for config i added config.js file. so in jsfiddle i simply add ckeditor live link..

[AlfonsoML]

Nice. And again: how do you expect my plugin to work if you don't add it? Is ROR that magical that can guess what do you want to do?