Vue3使用CKEditor5简介–入门

CKEditor是一款功能强大的富文本编辑器。官网是这么描述的：具有协作编辑功能的智能所见即所得编辑器组件。目前已经更新到第五版了，也就是我们今天的主角。

简介

对于CKEditor5，我们还是看官网怎么说的吧(中文由网页翻译)

强大的框架。模块化架构。易于定制。具有模块化体系结构的现代JavaScript RTF编辑器。其简洁的用户界面和功能为创建语义内容提供了理想的所见即所得UX
1.用MVC架构，自定义数据模型，虚拟DOM编写在ES6中。
2.响应式图像和媒体嵌入（视频，推文）。
3.自定义输出格式：HTML和Markdown支持。
4.通过自动格式化和协作来提高生产力。
5.通过设计可扩展和可定制。

明人不说暗话，在项目中尝试这个编辑器的过程中，还是遇到很多问题的。好在CKEditor5的文档比较全(英文看的脑壳疼，好在网页能翻译，嘎嘎)，而且网上也有很多前辈的共享秘籍，一番探索后，勉强入门了吧，这里简单记录一下，不足之处，多多指正。

CKEditor5 提供了5中“build”，这里就简单理解为官方定制好的5种类型吧，就像餐厅里的套餐一样，既能点套餐，也可以单点。后面会说到‘单点’，看官且听小子慢慢道来。。

1.Classic editor 
2.Inline editor
3.Balloon editor
4.Balloon block editor
5.Document editor

使用

在官网的demo中，依次试用体验之后，我选择了Documen editor这种类型的。每一种类型都有对应的包，先下载依赖包，后面按照npm上Quick start里说的照做就行了。

npm install --save @ckeditor/ckeditor5-build-decoupled-document

结构也很简单，两个div，一个作为工具栏，一个作为编辑器主体。

<div id="toolbar-container"></div>
<div id="editor">
  <p>This is the editor content.</p>
</div>

import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
 
DecoupledEditor
  .create( document.querySelector( '#editor' ) )
  .then( editor => {
    document.querySelector( '#toolbar-container' ).appendChild( editor.ui.view.toolbar.element );

    window.editor = editor;
  })
  .catch( error => {
    console.error( 'There was a problem initializing the editor.', error );
  });

按照文档上说的，到这里就算完成了一个简单的编辑器。但是，当我打开页面的时候，并没有看到编辑器，控制台报错：There was a problem initializing the editor. o: Cannot convert undefined or null to object，检查了一下，发现是在初始化的时候找不到dom，修改之后，编辑器出来了，还可以输入，看起来好像是没问题了，我尝试着插入一张图片，选好本地图片后，编辑器没反应，没有乱码，也没有报错。控制台却报了一个警告

filerepository-no-upload-adapter Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-filerepository-no-upload-adapter

告诉我没有配置上传适配器。好吧，再去查图片上传文档。文档上有好几种图片上传的模式，我选择了Base64适配器的模式，这样不用跟后台交互，减少了后台的工作量以及联调的麻烦，

跟着Base64适配器文档过一遍，页面干脆就直接报错：CKEditorError: ckeditor-duplicated-modules，比干脆面还干脆！！，接着查文档，原来我用的是他们定制的套餐，里面是没有这个插件的，如果想要添加的话，不能这样直接添加，口说无凭，文档为证。安装插件方法由于条件不予许，就没有尝试，以后可以研究一下，我是用了另一种方法—‘单点’

在线定制编辑器

上面说过CKEditor5不但能点套餐，还可以单点，支持定制化，到在线构建页面，按照步骤选择自己想要的插件，最后生成导出一个zip文件。解压后找到build文件，将里面的文件包括文件夹全部拷贝一份，到项目中node_modules 下找到 @ckeditor/ckeditor5-build-decoupled-document/build ，全部替换成我们刚才拷贝的文件。重新跑项目，再添加文件，就可以了。样式估计会有点乱，只能多花点时间慢慢调咯。

列位看官，CKEditor5还有很多功能和用法，这里简单介绍到这里。希望对你有所帮助，感谢阅读，再会！