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

Question

我在我的项目中使用 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>
 );
}

占位符不是这样工作的

Answer 1

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

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

Answer 2

我试图让它更清楚，而且只读不是配置属性。这是一个组件道具。并且您必须使用配置作为示例才能让 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>

);
}

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

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

javascript

reactjs

ckeditor

ckeditor4.x