Vue CKEditor5 快速了解并使用

一、简介

• Ckeditor5 是一个 JavaScript 富文本编辑器，具有 MVC 架构、自定义数据模型和虚拟 DOM。

• Ckeditor5 辅助地址：GitHub仓库、官网地址、官方Demo。

• Ckeditor5 安装文档 包含 CDN、Vue2、Vue3、Angular、React 等安装方式。

• 很多功能是需要对应插件支持的，如果有的功能使用不了，则可以自己安装一下插件：插件安装与使用、插件列表，也可以使用其他开发者开发的插件。

• 在使用过程中，遇到报错，可以查看错误码，并结合 官方错误码解释地址 排查解决问题。

  // 冒号后面的就是错误码
  CKEditorError: editor-isreadonly-has-no-setter
  CKEditorError: ckeditor-duplicated-modules
  ...
  

二、官方 Demo 编辑器的 区别 与 安装

• 官方Demo 中有几个官方封装的编辑器可以 根据需求 调整工具栏后直接进行使用，也可以在这个基础上进行自定义。

• 经典编辑器（classic）：

  经典编辑器是大多数用户传统上学习与富文本编辑器相关联的东西，一个工具栏，其编辑区域放置在页面上的特定位置，通常作为表单的一部分，用于向服务器提交一些内容。

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

• 内联编辑器（inline）：

  内联编辑器带有一个浮动工具栏，当编辑器获得焦点时（例如通过单击它），该工具栏变得可见。与经典编辑器不同，内联编辑器不会呈现给定元素，它只是使其可编辑。因此，编辑内容的样式在创建编辑器之前和之后将完全相同。

  使用内联编辑器的一个常见场景是为用户提供在网页上实际位置编辑内容的可能性，而不是在单独的管理部分中进行。

  $ npm install --save @ckeditor/ckeditor5-build-inline
  

• 气球编辑器（balloon）：

  气球块编辑器可以让你直接在目标位置创建内容，气球编辑器与内联编辑器非常相似。

  $ npm install --save @ckeditor/ckeditor5-build-balloon
  

• 气球块编辑器（balloon-block）：

  气球块本质上是 气球编辑器 带有一个额外的块工具栏，可以使用附加到可编辑内容区域的按钮并按照文档中的选择进行访问。工具栏提供对其他块级编辑功能的访问。

  $ npm install --save @ckeditor/ckeditor5-build-balloon-block
  

• 文档编辑器（document）：

  文档编辑器专注于类似于原生文字处理器的富文本编辑体验。它最适合创建通常稍后打印或导出为 PDF 文件的文档。

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

• 文档分页编辑器（document-paged）：

  跟 文档编辑器 差不多，但是多了分页相关的功能。

  $ npm install --save @ckeditor/ckeditor5-build-document-paged
  

三、Vue2.x 基本使用

• 方式一：

  • 然后安装需要使用的编辑器，以 经典编辑器 举例

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

  • 在页面中使用

    <template>
      <!-- ckeditor 父元素 -->
      <div class="editor-view">
        <!-- 编辑器 -->
        <div id="editor"></div>
      </div>
    </template>
    
    <script>
    // 经典编辑器（$ npm install --save @ckeditor/ckeditor5-build-classic）
    import Editor from '@ckeditor/ckeditor5-build-classic'
    
    // 内联编辑器（$ npm install --save @ckeditor/ckeditor5-build-inline）
    // import Editor from '@ckeditor/ckeditor5-build-inline'
    
    // 气球编辑器（$ npm install --save @ckeditor/ckeditor5-build-balloon）
    // import Editor from '@ckeditor/ckeditor5-build-balloon'
    
    // 气球块编辑器（$ npm install --save @ckeditor/ckeditor5-build-balloon-block）
    // import Editor from '@ckeditor/ckeditor5-build-balloon-block'
    
    // 文档编辑器（$ npm install --save @ckeditor/ckeditor5-build-document）
    // import Editor from '@ckeditor/ckeditor5-build-document'
    
    // 文档分页编辑器（$ npm install --save @ckeditor/ckeditor5-build-document-paged）
    // import Editor from '@ckeditor/ckeditor5-build-document-paged'
    
    // 中文包（语言包都在 build 版本中，注意 ckeditor5-build-xxx，xxx 需要替换为安装的编辑器包路径)
    import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
    export default {
      data () {
        return {
          // 编辑器对象
          editor: undefined,
          // 编辑内容
          editorData: '<p>Content of the editor</p>',
          // 编辑器配置
          editorConfig: {
            // 配置语言
            language: 'zh-cn'
            // 功能栏
            // toolbar: {
            //   items: ['Bold', 'Italic', 'Link' ...]
            // }
            // 更多的配置....
          }
        }
      },
      mounted () {
        // 初始化编辑器
        Editor.create(document.querySelector( '#editor' ), this.editorConfig).then(editor => {
          console.log('创建成功')
          // 记录编辑器对象
          this.editor = editor
          // 监听内容变化
          editor.model.document.on('change:data', (e) => {
            // 输出当前内容
            console.log(editor.getData(), e)
          })
          // 设置内容
          editor.setData(this.editorData)
        }).catch(error => {
          console.log('创建失败')
        })
      }
    }
    </script>
    

• 方式二：

  • 安装 ckeditor 组件

    $ npm install --save @ckeditor/ckeditor5-vue2
    

  • 在 main.js 中注册好 ckeditor 组件

    // 导入组件
    import CKEditor from '@ckeditor/ckeditor5-vue2'
    Vue.use( CKEditor )
    

  • 然后安装需要使用的编辑器，以 经典编辑器 举例

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

  • 在页面中使用

    <template>
      <!-- ckeditor 父元素 -->
      <div class="editor-view">
        <!-- 编辑器 -->
        <ckeditor :editor="editor" v-model="editorData" :config="editorConfig" @ready="onReady"></ckeditor>
      </div>
    </template>
    
    <script>
    // 经典编辑器（$ npm install --save @ckeditor/ckeditor5-build-classic）
    import Editor from '@ckeditor/ckeditor5-build-classic'
    
    // 中文包（语言包都在 build 版本中，注意 ckeditor5-build-xxx，xxx 需要替换为安装的编辑器包路径)
    import '@ckeditor/ckeditor5-build-classic/build/translations/zh-cn'
    export default {
      data () {
        return {
          // 编辑器对象
          editor: Editor,
          // 编辑内容
          editorData: '<p>Content of the editor</p>',
          // 编辑器配置
          editorConfig: {
            // 配置语言
            language: 'zh-cn'
            // 功能栏
            // toolbar: {
            //   items: ['Bold', 'Italic', 'Link' ...]
            // }
            // 更多的配置....
          }
        }
      },
      methods: {
        onReady (editor) {
          // 获得编辑器对象做处理
        }
      }
    }
    </script>
    

三、插件使用

• 想要使用其他插件时，可以通过批量注册插件，官方使用插件案例，在使用使用插件时，报错 Uncaught CKEditorError: ckeditor-duplicated-modules，是因为插件版本不一致导致重复构建报错，官方解决方案，如果遇到这种情况，要么调整插件版本，要么就自定义编辑器，推荐 自定义编辑器。

• 遇到上面的报错，推荐直接 自定义编辑器（插件安装使用流程），这样就不会存在什么问题了。

四、常用功能文档列表

• Vue CKEditor5 剪切板事件监听，贴贴事件拦截

• 后续使用在更新（可以自己看文档）…