CKEditor 5简介

CKEditor 5是一个超现代的JavaScript富文本编辑器，具有MVC架构、自定义数据模型和虚拟DOM。它是在ES6中从头编写的，并且有出色的webpack支持。包含经典编辑器、内联编辑器、气球块编辑器、气球编辑器、文档编辑器。

• 经典编辑器（Classic editor）：经典编辑器显示带有工具栏的框式编辑区域，放置在页面的特定位置。线上DEMO
• 内联编辑器（Inline editor）：内联编辑器允许您在其目标位置直接创建内容，当可编辑文本被聚焦时，将出现一个浮动工具栏。线上DEMO
• 气球块编辑器（Balloon block editor ）：气球块编辑器可以让你直接在目标位置创建内容。线上DEMO
• 气球编辑器（Balloon editor ）：气球编辑器允许您在目标位置直接创建内容，这得益于出现在选中的可编辑文档元素旁边的气球工具栏。线上DEMO
• 文档编辑器（Document editor ）：它最适用于创建通常稍后打印或导出为PDF文件的文档。线上DEMO

经典编辑器安装

npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

经典编辑器使用

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

class App extends Component {
    render() {
        return (
            <div className="App">
                <h2>Using CKEditor 5 build in React</h2>
                <CKEditor
                    editor={ ClassicEditor }
                    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;

经典编辑器属性介绍

• editor (required) -要使用的editor构造函数。
•  data—创建编辑器的初始数据。参见基本API指南。
•   config—编辑器配置。参见配置指南。
• id—编辑器id。当此属性更改时，组件将使用新数据重新启动编辑器，而不是在初始化的编辑器上设置新数据。
•  disabled -布尔值。如果属性设置为true，则编辑器将切换到只读模式。
• onReady -当编辑器实例就绪时调用的函数。如果发生错误，在组件重新初始化之后也会调用此回调。
•   onChange—当编辑器数据发生更改时调用的函数。看到editor.model。文档#改变:数据的事件。
•   onBlur -编辑器模糊时调用的函数。看到editor.editing.view。文档#模糊事件。
•  onFocus -当编辑器被聚焦时调用的函数。看到editor.editing.view。文档#焦点事件。
•  onError -当编辑器在初始化期间或运行时崩溃时调用的函数。它接收两个参数:错误实例和错误详细信息。错误细节是一个包含两个属性的对象:
            {String}阶段:'initialization'|'runtime' -当错误发生时通知(在编辑器或上下文初始化期间，或初始化之后)。
•   willEditorRestart -当为true时，表示编辑器组件将自动重启。

转载：码书网码书网，Ma Shu，一个专门面向计算机技术相关的软硬件人（俗称码农）与邀约注册软硬件专家（俗称码咖）之间的编程社交网站。https://www.mashuwang.com.cn/essay/detail/uv1w2weJ?wsos=1