CKEditor5 富文本编辑器安装以及使用

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><CKEditoreditor={ 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

CKEditor5 富文本编辑器安装以及使用相关推荐

在Vue中使用CKEditor5富文本编辑器
在项目中遇到富文本编辑器需要实现粘贴图片的功能,使用场景:如用户在其他地方截图可以直接在富文本编辑器内粘贴. 找了一圈市面上开源免费的富文本编辑器,最后选中CKEditor.ckeditor doc ...
ckeditor5富文本编辑器（1）
ckeditor5官方网站: https://ckeditor.com/ckeditor-5/ ckeditor5下载: https://ckeditor.com/ckeditor-5/downloa ...
wangEditor富文本编辑器安装与入门
文章目录官网安装 #npm #CDN 使用官网 https://www.wangeditor.com/v5/ 安装包括 vue React 组件 #npm 安装 editor yarn add ...
ckeditor5html编辑,CKEditor5富文本编辑器如何取值
ClassicEditor .create( document.querySelector( '#editor' ), { //工具栏,可选择添加或去除 toolbar: ['headings', ' ...
Django学习18 -- 富文本编辑器（Rich Edit）
1. 富文本编辑器,Rich Edit CharField,单行文本(Django默认) TextField,多行文本(Django默认) 富文本编辑器是能显示(编辑)图文效果的输入控件 2. Dja ...
百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器一.下载并且设置百度富文本编辑器的样式你可以去百度UEditor ...
富文本编辑器 ck-editor5 的使用
最近在项目中需要用到富文本编辑器,据说ck-editor5很不错,于是就使用它了,不过在期间也遇到了很多问题,这里记录下. 一.引入ck-editor5 文档地址:Predefined builds ...
tui-editor（富文本编辑器插件）安装报错处理方法
tui-editor安装报错处理方法项目中yarn或npm install时,tui-editor(富文本编辑器插件)安装报错. 显示 warning tui-editor > highlig ...
【推荐】1657- 灵活可扩展，2023年值得尝试的13款富文本编辑器
作为前端开发人员,我们经常需要为网站和应用程序添加文本内容.与传统的文本编辑器不同,富文本编辑器可让您轻松创建各种类型的文本内容,包括加粗字体.斜体字.框架.列表.图片和视频等. 本文我将向大家推荐 ...