ckeditor5快速使用

ckeditor官网提供了可以个人定制的方式，然后将地址好的包下载到本地，即可立即使用，定制方式如下：

打开官网定制页面：https://ckeditor.com/ckeditor-5/online-builder/

第一步：选择一个编辑器的类型，本人选择的是文件类型的编辑器：Decoupled document；

第二步：选择编辑器中需要用到的工具及插件；

第三步：选择工具栏中要显示的工具；

第四步：选择默认的语言；

第五步：开始build；

第六步：下载build后的包；

以上是在官网进行的操作，接下来在本地操作，下载下来的包的目录结构如下：

其中build文件夹中的ckeditor.js文件，就是我们要使用的。src中的文件，属于源码，如果需要增加新的插件，可以在源码里修改，然后本地重新执行npm run build。（build前需要npm install一下）

下面是build文件夹中的文件：

把ckeditor.js文件拷贝到我们的项目当中，本人把文件放到了src目录下的components文件夹中。

然后在要使用编辑器的文件中，引入该文件：

import CKEditor from '../../components/ckeditor'

接下来就是按照官网使用ckeditor的方法正常使用就可以了。

initCKEditor() {CKEditor.create(document.querySelector("#editor"), {language: "zh-cn",toolbar: {items: ['heading', '|','fontfamily', 'fontsize', '|','alignment', '|','fontColor', 'fontBackgroundColor', '|','bold', 'italic', 'strikethrough', 'underline', 'subscript', 'superscript', '|','link', '|','outdent', 'indent', '|','bulletedList', 'numberedList', 'todoList', '|','code', 'codeBlock', '|','insertTable', '|','uploadImage', 'blockQuote', '|','undo', 'redo'],shouldNotGroupWhenFull: true},fontFamily: {options: ["default","Arial, Helvetica, sans-serif","Courier New, Courier, monospace","Georgia, serif","Lucida Sans Unicode, Lucida Grande, sans-serif","Tahoma, Geneva, sans-serif","Times New Roman, Times, serif","SimSun","NSimSun","FangSong","FangSong_GB2312","Microsoft YaHei","KaiTi","KaiTi_GB2312","SimHei",],},fontSize: {options: [9,11,12,"default",16,18,20,22,24,26,28,30,32,34,36,38,40,],},}).then((editor) => {const toolbarContainer = document.querySelector("#toolbar-container");toolbarContainer.appendChild(editor.ui.view.toolbar.element);this.editor = editor; //将编辑器保存起来，用来随时获取编辑器中的内容等，执行一些操作}).catch((error) => {console.error(error);});},

使用this.editor.setData方法为编辑器赋值，使用this.editor.getData()方法获取富文本的内容；

关于可能会出现的样式问题：

编辑器引入之后，可能会出现文本区域没有边框的情况，另外还可能会出现字体未生效、下划线删除线未生效等问题，这时需要手动修改下css样式来弥补下问题：

.ck-rounded-corners .ck.ck-editor__editable:not(.ck-editor__nested-editable),
.ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-rounded-corners {border: 1px solid #cccccc;height: 300px;u {text-decoration: underline;font-family: inherit !important;}s {text-decoration: line-through;font-family: inherit !important;}strong {font-weight: bold;font-family: inherit;}i {font-family: inherit !important;}sub {font-family: inherit !important;}sup {font-family: inherit !important;}
}
.ck.ck-reset.ck-list {max-height: 300px;overflow-y: scroll;
}

以上是通过官网build的方式引用编辑器的方式，还有一种方式是直接通过npm安装ckeditor，步骤如下：

第一步：执行npm install @ckeditor/ckeditor5-build-decoupled-document -S （我选择的是安装文件类型的编辑器，如果安装其它类型的，需要改成其它的包名）

第二步：在需要使用编辑器的页面内，import CKEditor from "@ckeditor/ckeditor5-build-decoupled-document";

第三步：剩余的操作就和第一种引入方式一样了。

以上两种方式，在文件中使用的方式都是需要在页面载入的时候调用一下initCKEditor方法，用来初始化编辑器，然后html代码是

<!-- 工具栏容器 -->
<div id="toolbar-container"></div>
<!-- 编辑器容器 -->
<div id="editor"></div>

没有体会到使用vue编程的乐趣，所以这里要介绍一下使用vue语法应用编辑器的方式：

除了安装@ckeditor/ckeditor5-build-decoupled-document外，还需要npm install --save @ckeditor/ckeditor5-vue2 （安装支持vue2.x语法的包），然后在main.js中引入：

import Vue from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue2';Vue.use( CKEditor );

再然后，在需要使用编辑器的文件中：

<template><div id="app"><ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor></div>
</template><script>import DocumentEditor from '@ckeditor/ckeditor5-build-decoupled-document';export default {name: 'app',data() {return {editor: DocumentEditor,editorData: '<p>Content of the editor.</p>',editorConfig: {// The configuration of the editor.}};}}
</script>

关于ckeditor的配置都写入到editorConfig中。官网详细介绍：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v2.html

以上是关于ckeditor的使用方法，如有问题，请留言，随时交流解答。

另外麻烦您动动可爱的小手，关注下本人的公众号【web前端梦工厂】，算是对同样是程序员的我的一点鼓励，谢谢。

ckeditor5快速使用相关推荐

Vue CKEditor5 快速了解并使用
一.简介 Ckeditor5 是一个 JavaScript 富文本编辑器,具有 MVC 架构.自定义数据模型和虚拟 DOM. Ckeditor5 辅助地址:GitHub仓库.官网地址.官方Demo. ...
CKEditor快速介绍与入门示例
CKEditor 富文本编辑器 CKEditor 是一款知名的WYSIWYG富文本Web编辑器,WYSIWYG 的全称是what you see is what you get,也就是所见即所得. 富 ...
CKEditor5 集成 Vue
在 Vue 中集成 CKEditor5 更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话这已经是为同一个产品写的第三篇关于富文本编辑器的笔记了,这东西真的是 ...
快速排查feign.FeignException: status 500 …
feign.FeignException: status 500 - 总结一下feign报500的时候快速排查问题的方法, 这个bug容易出现的地方分别为: 1. 远程调用的时候feign的注册信息有 ...
python中如何对复杂的json数据快速查找key对应的value值（使用JsonSearch包）
前言之前在实际的项目研发中,需要对一些复杂的json数据进行取值操作,由于json数据的层级很深,所以经常取值的代码会变成类似这样: value = data['store']['book'][0] ...
如何利用python的newspaper包快速爬取网页数据
文章目录前言一个爬取新闻网页数据的神器小试牛刀如何快速安装 windows安装 Debian / Ubuntu安装 OSX安装体验更多的功能前言随着越来的进行自然语言处理相关方面的研究, ...
【快速上手mac必备】常用优质mac软件推荐(音视频、办公、软件开发、辅助工具、系统管理、云存储)
本文章的主要内容是我作为一名大四学生.准程序员.up主这三种身份来给大家推荐一下 mac 上好用的软件以及工具.本人也是从去年9月份开始从windows阵营转移到了mac阵营,刚开始使用的时候,也曾主 ...
容器云原生DevOps学习笔记——第二期：如何快速高质量的应用容器化迁移
暑期实习期间,所在的技术中台-效能研发团队规划设计并结合公司开源协同实现符合DevOps理念的研发工具平台,实现研发过程自动化.标准化: 实习期间对DevOps的理解一直懵懵懂懂,最近观看了阿里专家带 ...
面试高频——JUC并发工具包快速上手（超详细总结）
目录一.什么是JUC 二.基本知识 2.1.进程和线程 2.2.Java默认有两个进程 2.3.Java能够开启线程吗? 2.4.并发和并行 2.5.线程的状态 2.6.wait和sleep的区别 ...

ckeditor5快速使用

ckeditor5快速使用相关推荐

最新文章

热门文章