如何在React Native应用程序中集成ckeditor

Question

我想在我的 React Native 应用程序中使用 ckeditor 作为文本编辑器。是否有任何适当的文档提供有关如何将 ckeditor 集成到 React Native 应用程序中的任何信息？

Answer 1

在 React 中使用 CKEditor 是分步指南：

1-转到https://ckeditor.com/ckeditor-5/online-builder/。

2-选择编辑器类型。

3-选择您要添加的插件。

4-设计您选择的编辑器。 https://ckeditor.com/ckeditor-5/demo/

5-选择编辑器的默认语言，然后下载 zip 文件。

6-下载 zip 文件后将其解压。

注意：您也可以在此处检查上述步骤：https://ckeditor.com/docs/ckeditor5/latest/installation/getting-started/quick-start-other.html

7-解压后，将文件夹复制并粘贴到项目文件夹的根目录中。

注意： 如果需要，您可以重命名该文件夹。

结构如下所示：

--ProjectName

      --ckeditor

      --node_modules

      --src

      --package.json

      --packagelock.json

8-现在打开终端。

9-如果您使用 npm，则运行命令

注意： 添加文件时请确保正确命名文件夹。

npm add file: ./ckeditor

或者如果您使用的是纱线

yarn add file: ./ckeditor

10-然后安装ckeditor为：

npm install --save  @ckeditor/ckeditor5-react

或者如果您使用的是纱线

yarn add @ckeditor/ckeditor5-react

11-安装后使用现在可以使用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>
 )
}

错误：这是常见错误

Error: this.props.editor.create is not a function 

。

但是当你这样做时会导致：

import { Editor } from 'ckeditor5-custom-build/build/ckeditor';

并用作

editor={ Editor }

在 ckeditor 组件内部。

所以请务必仔细编写代码：

import { Editor as ClassicEditor } from 'ckeditor5-custom-build/build/ckeditor';

并在组件内部使用它作为

editor={ ClassicEditor }

如果您遇到任何问题，例如重复模块，请确保您正确安装了 ckeditor。

快乐编码，祝你有美好的一天❤️。