[CKEditor] Adding placeholder to CK Editor

Forge Component
(29)
Published on 25 Aug by Prasad Rao
29 votes
Published on 25 Aug by Prasad Rao

Hi All, 

I'm trying to add a placeholder for a ckeditor text field. 

Have tried adding it to the input prompt and also via the CK editor config but it doesn't appear. 

Anyone got this to work correctly?

https://ckeditor.com/docs/ckeditor5/latest/features/editor-placeholder.html 


Hi,

The document link you provided is for v5, the forge component is currently in v4 and in v4 you need a plugin called confighelper, which is not included in forge component by default.

Regards.

Prasad Rao wrote:

Hi,

The document link you provided is for v5, the forge component is currently in v4 and in v4 you need a plugin called confighelper, which is not included in forge component by default.

Regards.

 Hi Prasad,

Can you provide an example on how to use the config helper plugin. How to set your own default placeholder text?


Thanks 

Hi,

There are two option here

Option #1:

  1. Download the confighelper plugin and have the plugin.js file ready
  2. Clone the ckeditor module
  3. Add the confighelper's plugin.js with deploy to target environment as .\ckeditor\plugins\confighelper
  4. In your application refer to the clone version of ckeditor and have below config
  5. extraPlugins: 'confighelper',
    placeholder: 'Test Placeholder',

Option #2: Preferred one

  1. Create a new js file for example config.js with below code
  2. //load external plugin

    (function() {

        CKEDITOR.plugins.addExternal('confighelper','../../CKEditorDemo/ckeditor/plugins/confighelper/', 'plugin.js');

     })();

    CKEDITOR.editorConfig = function( config ) {

    };

  3. In your application add your config.js from step 1 and confighelper's plugin.js for example below
  4. Change the config in your application to below
  5. customConfig: '/CKEditorDemo/ckeditor/config.js',
    extraPlugins: 'confighelper',
    placeholder: 'Test Placeholder',

Regards.