⭐前言
大家好，我是yma16，本文分享关于前端react整合ckeditor——配置插件、自定义toolbar工具栏。
react系列往期文章：
react-grapesjs——开源代码学习与修改（初出茅庐）
react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html
【腾讯云 Cloud studio 实战训练营】搭建Next框架博客——抛开电脑性能在云端编程(沉浸式体验)
关于ckeditor
CKEditor是一种强大的可嵌入式编辑器，用于在Web浏览器中编辑文本内容。它支持HTML，CSS和JavaScript，可以用于创建富文本编辑器，包括文本格式化，图像和视频插入，链接，表格等。 CKEditor提供许多插件，以便用户可以自定义其编辑器的外观和功能。它是由CKSource公司开发和维护的开源软件。
ckeditor发展历史
CKEditor是一个开源的WYSIWYG HTML编辑器，最初由FredCK创建，在2003年发布第一个版本。在经过多个版本的更新和改进之后，CKEditor 4在2012年发布，它是一个完全重构的版本，具有更好的性能和更好的可扩展性。
在CKEditor 4发布后，它成为了最流行的HTML编辑器之一，并在全球范围内广受欢迎。CKEditor 4的成功得益于其强大的功能和易于使用的界面，以及灵活的插件系统和丰富的文档支持。
CKEditor 4的发展历程如下：
- 2003年：CKEditor的第一个版本发布，这是一个基于Javascript的HTML编辑器。
- 2005年：CKEditor 2发布，这是一个完全重构的版本，具有更多的功能和更好的性能。
- 2008年：CKEditor 3发布，这是一个基于Web标准的编辑器，具有更加现代的界面和更好的可访问性。
- 2012年：CKEditor 4发布，这是一个完全重构的版本，具有更好的性能和更好的可扩展性。
随着Web技术的不断发展，CKEditor团队不断更新和改进编辑器，以适应最新的Web标准和技术。最新的版本是CKEditor 5，它是一个全新的版本，具有更加现代化的界面和更好的可访问性。
⭐引入ckeditor
ckeditor4的官网配置:https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html
ckeditor 的两种模式
- Classic Editing 典型编辑器
- Inline Editing 内联编辑器
**Classic Editing **
编辑器通常由放置在页面上特定位置的工具栏和编辑区域表示，通常作为表单的一部分
Inline Editing
内联编辑是 CKEditor 4中引入的一项新技术，它允许您选择页面上的任何可编辑元素并就地进行编辑。因此，编辑器可用于编辑看起来与最终页面相似的内容。
悬浮的tooltip工具栏
区别
Classic Editing 工具栏位置固定
Inline Editing 工具栏位置悬浮在选择字体的周围
效果预览：
https://yongma16.xyz/react-mjml/
⭐npm 包引入
安装ckeditor
$ npm install ckeditor4-react
官网案例 Classic Editing
import React from 'react'; import { CKEditor } from 'ckeditor4-react'; function App() { return ( <div className="App"> <h2>Using CKEditor 4 in React</h2> <CKEditor initData="<p>Hello from CKEditor 4!</p>" onInstanceReady={ () => { alert( 'Editor is ready!' ); } } /> </div> ); } export default App;
这里我作为组件引入
效果：
⭐cdn资源引入
在ckeditor4的官网下载:https://ckeditor.com/ckeditor-4/download/
下载开源的源码包
在react的静态资源文件中引入，放入public文件目录
Inline Editing 案例使用
index.html引入ckeditor
<script src="./ckeditor/ckeditor.js"></script>
如下图所示
CkeditorPage.tsx
import { useEffect } from "react"; const CkeditorPage=(props:any)=>{ useEffect(()=>{ if(CKEDITOR){ // @ts-ignore CKEDITOR.disableAutoInline = true; // @ts-ignore CKEDITOR.inline( 'editor1' ); } },[]) return <> <div id="editor1" contentEditable="true"> <h1>Inline Editing in Action!</h1> <p>The "div" element that contains this text is now editable.</p> </div> </> }; export default CkeditorPage;
其中销毁ckeditor的方法如下：
for(name in CKEDITOR.instances) { CKEDITOR.instances[name].destroy() }
内联编辑器的效果
选中字体才出现工具栏，专注于预览效果。
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏（二）https://developer.aliyun.com/article/1492706
