如何在ckeditor4-react中添加占位符和只读？

如何解决如何在ckeditor4-react中添加占位符和只读？

我在我的项目中使用 ckeditor4-react link 并想添加占位符并希望使其成为 readOnly 或 disabled 。 我是怎么做的

这是我的代码

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

占位符不以这种方式工作

解决方法

readonly 不是 config 中的属性，它应该是一个单独的道具。 关于占位符，您需要将配置调整为如下例所示。 我已经试过了，一切正常。

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

,

我试图让它更清晰，而且 readonly 不是配置属性。这是一个组件道具。并且您必须使用配置作为示例才能让 placeHolder 工作。并且 editorplaceholder 属性的值代表将出现在 ckeditor 中的占位符。我希望现在一切都清楚了

 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>

);
}