CODEWITHSUNDEEP
javascriptreactjsckeditorckeditor4.x
Asad
Asad

Reputation: 3160

how I can add placeholder and readOnly in ckeditor4-react?

Im using ckeditor4-react link in my project and want to add placeholder and want to make it readOnly or disabled . How I do this

here is my code

 import React from 'react';
 import CKEditor from 'ckeditor4-react';

const Editor= (props) => {

return (
<div className="flex flex-col flex-1">
  <CKEditor
    onBlur={(value) => input.onBlur()}
    data={input.value}
    onChange={event=> input.onChange(event.editor.getData())}
    config={{
      //editorplaceholder: "hello ...", // tried this 
      readOnly:true, // tried this 
      
      //placeholder: "Placeholder text...", // also tried this 
      toolbar: [ [ 'Bold', 'Italic', 'Undo', 'Redo', 'Link', 'Unlink', "NumberedList", "BulletedList","Placeholder" ] ]
      
    }}
 }
   />
 
</div>
 );
}

placeholder not working this way

Upvotes: 0

Views: 1075

Answers (2)

Mohammed Said Elattar
Mohammed Said Elattar

Reputation: 377

I tried to make it more clearer,and again readonly is not a configuration attribute. It's a component prop. and the you have to use the config as the example to let the placeHolder work. and the value of editorplaceholder attribute is representing the place holder that will appear in the ckeditor. I hope now every thing is clear

 import React from 'react';
 import CKEditor from 'ckeditor4-react';
 const config = {
      extraPlugins: "editorplaceholder", // it's mandatory to be able to use the place holder
      editorplaceholder: "Write here what ever you would like to show in the place holder", //   this can be what ever you need
}
const Editor= (props) => {

return (
<div className="flex flex-col flex-1">
  <CKEditor
    config={config}
    readOnly={true}
  />
</div>

);
}

Upvotes: 0

Mohammed Said Elattar
Mohammed Said Elattar

Reputation: 377

readonly is not an attribute in the config , it should be a separate prop. and regarding the placeholder you need to adapt the config to be like the following example. I already tried it and everything worked fine.

<div className="flex flex-col flex-1">
  <CKEditor
    config={{
      extraPlugins: "editorplaceholder",
      editorplaceholder: "Start typing here...",
    }}
    readOnly
  />
</div>

Upvotes: 2

Related Questions