React-CKEditor5的安装和使用

效果

前言

我使用的是React，下面我来讲解如何参考官方文档来安装和配置。

操作

1、安装依赖包

pnpm install ckeditor5 ckeditor5-premium-features
pnpm install @ckeditor/ckeditor5-react

注意：ckeditor5-premium-features是收费的高级功能，没有需要的话可以不用安装

安装好之后如下所示：

"ckeditor5": "^43.0.0",
"@ckeditor/ckeditor5-react": "^9.0.0"

2、配置CKEditor

import {
    ClassicEditor,
    SimpleUploadAdapter,
    Autosave,
    Bold,
    Essentials,
    Italic,
    Mention,
    Paragraph,
    Undo,
    Heading,
    FontSize,
    Underline,
    Strikethrough,
    Link,
    List,
    BlockQuote,
    FontColor,
    FontBackgroundColor,
    Subscript,
    Alignment,
    TodoList,
    Indent,
    Code,
    CodeBlock,
    MediaEmbed,
    Image,
    ImageCaption,
    ImageStyle,
    ImageToolbar,
    ImageResize,
    ImageUpload, 
    Table,
    TableToolbar,
} from 'ckeditor5';

import 'ckeditor5/ckeditor5.css';
import './ckeditorDark.css'
import {CKEditor} from '@ckeditor/ckeditor5-react';
import translations from 'ckeditor5/translations/zh-cn.js';


<CKEditor
                    editor={ClassicEditor}
                    data={content || ''}
                    config={{
                        // 必须设置这个，否则中文翻译失效
                        translations,
                        language: 'zh-cn', // 设置语言为中文
                        // 设置上传接口，注意上传的文件名必须是：upload
                        simpleUpload: {
                            uploadUrl: `http://xxx`
                        },
                        link: {
                            addTargetToExternalLinks: true,
                            defaultProtocol: 'https://',
                        },
                        image: {
                            toolbar: [
                                'imageStyle:inline',
                                'imageStyle:block',
                                'imageStyle:side',
                                '|',
                                'toggleImageCaption',
                                'imageTextAlternative',
                            ],
                        },
                        toolbar: {
                            items: ['heading',
                                '|',
                                'fontSize',
                                'bold',
                                'italic',
                                'underline',
                                'strikethrough',
                                'link',
                                'blockQuote',
                                'fontColor',
                                'fontBackgroundColor',
                                'subscript',
                                'bulletedList',
                                'numberedList',
                                'alignment',
                                'todoList',
                                'outdent',
                                'indent',
                                'code',
                                'codeBlock',
                                'insertTable',
                                'uploadImage',
                                'mediaEmbed',
                                'undo',
                                'redo'],
                        },
                        plugins: [
                            SimpleUploadAdapter,
                            Autosave,
                            Bold,
                            Essentials,
                            Italic,
                            Mention,
                            Paragraph,
                            Undo,
                            Heading,
                            FontSize,
                            Underline,
                            Strikethrough,
                            Link, BlockQuote,
                            FontColor,
                            FontBackgroundColor,
                            Subscript,
                            Alignment,
                            TodoList,
                            Indent,
                            Code,
                            CodeBlock,
                            Table,
                            TableToolbar,
                            MediaEmbed,
                            Image,
                            ImageCaption,
                            ImageStyle,
                            ImageToolbar,
                            ImageUpload,
                            ImageResize,
                            List,
                        ],
                        licenseKey: '<YOUR_LICENSE_KEY>',
                        mention: {
                            // Mention configuration
                        },
                        // 自动保存
                        // autosave: {
                        //     save( editor ) {
                        //         const urlParams = new URLSearchParams(window.location.search);
                        //         const nid = urlParams.get('nid');
                        //         return submitContent(nid, editor.getData());
                        //     }
                        // },
                        initialData: content,
                    }}
                    // onReady={editor => {
                    //     // You can store the "editor" and use when it is needed.
                    //     console.log('Editor is ready to use!', editor);
                    //     if (editor) {
                    //         editor.setData(content ? content : "")
                    //         console.log('editor.config=', editor.isReadOnly)
                    //         if (editor.isReadOnly) {
                    //             const toolbarElement = editor.ui.view.toolbar.element;
                    //             toolbarElement.style.display = 'none';
                    //         }
                    //         // editor.setReadOnly(true);
                    //     }
                    // }}
                    onChange={(event, editor) => {
                        const data = editor.getData();
                        setContent(data)
                        _.debounce(() => {
                            // 调用接口保存
                            submitContent(query.get('nid'), data)
                        }, 3000)
                    }}
                    onBlur={(event, editor) => {
                        const data = editor.getData();
                        submitContent(query.get('nid'), data)
                    }}
                />

这样就配置好了CKEditor,不过有几点需要关注下：

1、设置中文语言

import translations from 'ckeditor5/translations/zh-cn.js';

{
    translations,
    language: 'zh-cn', // 设置语言为中文
}

2、设置上传图片接口

simpleUpload: {
    uploadUrl: `http://xxx`,
    headers: {
        'X-CSRF-TOKEN': 'CSRF-Token',
        Authorization: 'Bearer <JSON Web Token>',
    }
}

注意：新版本需要你设置上传适配器如果你觉得麻烦可以使用官方内置的 SimpleUploadAdapter。

大概就这么多，其它的大家可自行探索新功能

总结

1、因为我之前使用的是@ckeditor/ckeditor5-react是6.3，升级完之后发现写法有所差异，新版本的写法更方便。

引用

CKEditor 文档
ckeditor5-demos