Question

我想在我的反应中,用模拟器作为文字编辑。是否有适当的文件可提供关于如何将沉积者纳入对本地人的反应的信息?

Answer 1

利用CKEditor在此处的反应是分步骤指南:

<>1>-Go to https://ckeditor.com/ckeditor-5/online-builder/。

2-Chose the editor type.

<>3>-Select the plugins that You 我想补充。

4-Design the editor of your choice. https://ckeditor.com/ckeditor-5/demo/

<>5>-Selecting the Object Language for the Editor and subsequentlydown the zip file.

<>6>-After下载Zip文档摘录。

<>光> 您也可在此检查上述步骤:https://ckeditor.com/docs/ckeditor5/latest/installation/ap-started/quick-start-other.html。

7-After extracting copy and paste the folder inside the root of your project folder.

<>说明: 如果你想要的话,你可以重新命名。

The structure would look like this:

--ProjectName

      --ckeditor

      --node_modules

      --src

      --package.json

      --packagelock.json

<>8>-Now对终端开放。

9-If you are using npm then run the command

Note: Make sure you name the folder Correctly when adding the file.

npm add file: ./ckeditor

其他资源

yarn add file: ./ckeditor

<>10>-Thenstaling ckeditor as:

npm install --save  @ckeditor/ckeditor5-react

其他资源

yarn add @ckeditor/ckeditor5-react

<>11>-After 装置的使用现在可以使用CkEditor。

import React from  react ;
import { Editor as ClassicEditor } from  ckeditor5-custom-build/build/ckeditor ;
import { CKEditor } from  @ckeditor/ckeditor5-react 

export default function App() {

return(

   <div>
    <CKEditor
            editor={ ClassicEditor }
            data="<p>Hello from CKEditor</p>"
            onReady={ editor => {
                 // You can store the "editor" and use it when desired.
                 console.log(  Editor is ready to use! , editor );
             } }
            onChange={ ( event, editor ) => {
                 const data = editor.getData();
                 console.log( { event, editor, data } );
                    } }
            onBlur={ ( event, editor ) => {
                  console.log(  Blur. , editor );
                    } }
            onFocus={ ( event, editor ) => {
                   console.log(  Focus. , editor );
            } }
                
          />
   </div>
 )
}

<>reRORS>: 这是一种常见错误,即<代码>Error:这一错误并非功能。

But it s caused when you do this: import { Editor } from ckeditor5-custom-build/build/ckeditor ; and used as editor={ Editor } inside the ckeditor component.

因此,确保仔细撰写该守则如下:

<条码>进口{主编,作为“Editor },来自舱底5-build/build/ckeditor”;,并在部件内用作<条码>editor={ «/code>

如果你得到任何像重复模块这样的问题,确保你正确安装了模拟器。

欢乐并有一个好的日子。

友情链接