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 剪切板事件监听，贴贴事件拦截
后续使用在更新（可以自己看文档）…

Vue CKEditor5 快速了解并使用相关推荐

vue文件快速生成模板代码
vue文件快速生成模板代码输入 vue 按 tab 键
go html vue,用Go+Vue.js快速搭建一个Web应用(初级demo)
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文给大家介绍用Go+Vue.js快速搭建一个Web应用(初级demo). 环境准备: 1. 安装go语言,配置go开 ...
.NET Core实战项目之CMS 第六章入门篇-Vue的快速入门及其使用
写在前面上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...
（vue基础试炼_01）使用vue.js 快速入门hello world
文章目录一.需求案例二.案例实现 2.1. 原始js写法 2.2. 怎样使用vue.js ? 2.3. 使用vue.js 写法三.案例vue简述? 四.案例趣味延伸五.表达值作用及嘱咐语一. ...
Windows之vue-cli安装和vue项目快速搭建
Windows之vue-cli安装和vue项目快速搭建 1.提前安装好node.js, 安装步骤:https://blog.csdn.net/qq_43842093/article/details/1 ...
Vue的快速入门通俗易懂(学习笔记)
本文是观看"[狂神说Java]Vue最新快速上手教程通俗易懂 "所记录的笔记,读者结合视频阅读更佳,文章包含了个人对相关知识点的粗略理解,借此进行分享,文中代码结构理解有误的地方, ...
Vue 3 快速上手
Vue 3 快速上手官网: 配置环境变量和nodejs node vue 开发环境搭建第二天的时候,vue create xxx.xxx.xxx(项目名)失败! 前端项目问题解决 ==第二天修改环 ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
vue生成本地html模板文件,vue文件快速生成页面模板
一 Vscode新建模板 1 菜单选择 2 新建全局代码片段二模板内容 { "Print to console": { "prefix": "vu ...

Vue CKEditor5 快速了解并使用

一、简介

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

三、Vue2.x 基本使用

方式一：

方式二：

三、插件使用

四、常用功能文档列表

Vue CKEditor5 快速了解并使用相关推荐

最新文章

热门文章

Vue CKEditor5 快速了解并使用

一、简介

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

三、Vue2.x 基本使用

方式一：

方式二：

三、插件使用

四、常用功能文档列表

Vue CKEditor5 快速了解并使用相关推荐

最新文章

热门文章

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