Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I add a Placeholder in a React CKEDITOR

I have read the documentation of ckeditor regarding the React Context , but I couldn't find how to make a Placeholder on the CKEditor.

This is the link to the react ckeditor react ckeditor

This is the sample code :

<CKEditor
    onInit={editor => {
        // Insert the toolbar before the editable area.
        editor.ui.view.editable.element.parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.view.editable.element);}}
        name={this.state.body}
        onChange={this.handleEditorChange}
        editor={DecoupledEditor}
        data={this.state.body}
        />
like image 326
Lutaaya Huzaifah Idris Avatar asked Oct 23 '18 11:10

Lutaaya Huzaifah Idris


People also ask

How to add placeholder in CKEditor?

It was reworked in CKEditor 4.3 and is now available as an inline widget. When the Placeholder plugin is enabled, the button is automatically added to the toolbar. Once clicked, it opens the Placeholder Properties dialog window that lets you add the placeholder text.

What is placeholder in react?

A placeholder is used to reserve space for content that soon will appear in a layout. Placeholders can include PlaceholderParagraph , PlaceholderHeader , and PlaceholderImage to let you format the loaders to emulate the content being loaded. Simulate loading.

How do you react with CKEditor?

The easiest way to use CKEditor 5 in your React application is by choosing one of the rich text editor builds. Additionally, it is also possible to integrate CKEditor 5 built from source into your application. You can also use a customized editor built by using CKEditor 5 online builder in any React application.


1 Answers

<CKEditor 
  config={{placeholder: "Placeholder text..."}} 
  ... 
  />

Works for me

like image 120
Uri Klar Avatar answered Oct 13 '22 00:10

Uri Klar