REACTJS

Question

我在将 CUSTOM CKEditor 5 导入 ReactJS 时卡住了。我已经搜索过文档，但似乎很难理解。

首先，我转到此处的 Onine Builder：https://ckeditor.com/ckeditor-5/online-builder/ 并下载 zip 文件。

然后，在这个 zip 文件中，我有构建文件夹（包含 ckeditor.js、ckeditor.js.map 和翻译文件夹）。将此文件夹中的所有内容复制到 /src/compoments/CKeditor（以在 React 中导入）。

然后像这样导入

import CKEditor from "@ckeditor/ckeditor5-react"; (install via npm)
import ClassicEditor from "./components/ckeditor/ckeditor"; (import from zip file)

我有这个错误。请告诉我如何在 ReactJS 中安装 CkEditor。

非常感谢。

enter image description here

Answer 1

您应该像这样将 zip 文件的内容添加到项目的根目录中：

├── ckeditor5
│   ├── build
│   ├── sample
│   ├── src
│   ├── ...
│   ├── package.json
│   └── webpack.config.js
├── node_modules
├── public
├── src
├── ...
└── package.json

然后运行这个命令yarn add file:./ckeditor5或npm add file:./ckeditor5。现在您可以通过这种方式使用您的自定义编辑器：

import React, { Component } from 'react';
import Editor from 'ckeditor5-custom-build/build/ckeditor';
import { CKEditor } from '@ckeditor/ckeditor5-react'

const editorConfiguration = {
    toolbar: [ 'bold', 'italic' ]
};

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 from online builder in React</h2>
                <CKEditor
                    editor={ Editor }
                    config={ editorConfiguration }
                    data="<p>Hello from CKEditor 5!</p>"
                    onReady={ editor => {
                        // You can store the "editor" and use when it is needed.
                        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>
        );
    }
}

export default App;

Answer 2

在顶部添加禁用的eslint，像这样

/* 禁用 eslint */

你的ckeditor.js代码在build/ckeditor.js

里面

/* 启用 eslint */

Answer 3

在两种情况下，您需要不时更改自定义构建。在这种情况下，您可以在运行

之后继续在 npm 上发布

npm run build

在您的自定义版本上，或者您可以将其保留在您的 github 中并使用

安装

npm install git+git@github.com:<your username>/<custom ckeditor>.git

您可以重命名该名称，以便在安装时进入

node_modules/@ckeditor/ckeditor5-custom-build

{
  "name": "@ckeditor/ckeditor5-custom-build",
   ....
}

现在您需要像这样导入

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

因此您的所有代码都将如下所示

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

export const  CkEditor =  () => {
  return (
    <div className="App">
        <h2>Using CKEditor 5 build in React</h2>
        <CKEditor
            data="<p>Hello from CKEditor 5!</p>"
            onReady={ editor => {
                // You can store the "editor" and use when it is needed.
                console.log( 'Editor is ready to use!', editor );
            } }
            onChange={ ( event, editor ) => {
                const data = editor.getData();
                console.log( {"data": data } );
            } }
            onBlur={ ( event, editor ) => {
                console.log( 'Blur.', editor );
            } }
            onFocus={ ( event, editor ) => {
                console.log( 'Focus.', editor );
            } }
        />
    </div>
);
}

REACTJS - 从在线构建导入 CKEditor 5

REACTJS - Import CKEditor 5 from online build

javascript

ckeditor