富⽂本编辑器CKEditor5的使⽤
富⽂本编辑器CKEditor 5的使⽤
记录了使⽤CKEditor的过程， 特殊强调，这⾥使⽤的是CKEditor5
向⽹页中添加CKEditor
只是向页⾯中添加该编辑器不需要什么特殊的操作，遵从以下步骤即可：
1. 下载js⽂件，并按照⼀般引⽤js的⽅式引⽤该js⽂件
下载地址：， ⾥⾯有CKEditor的相关介绍和各种教程，到下载地址，下载即可，这⾥我选择的是下载ZIP压缩包，然后拷贝到⼯程⽬录下：
2. 在预期插⼊位置上填充textarea标签，然后使⽤js将该标签进⾏替换：
预期位置上的代码：
<textarea namen="content"id="editor">
<p>这⾥的内容会被初始化到编辑器中</p>
</textarea>
js脚本（页⾯加载完成后运⾏）
var myEditor = null;
ClassicEditor
.create(document.querySelector("#editor"))
.then(editor => {
myEditor = editor;
})
.catch(error => {
<(error);
});
}
得到的结果如下：
注意，正常情况下该插件是英⽂的，且没有对齐⼯具，上图是我添加插件并设置语⾔后的结果。
CKEditor的基本使⽤
对编辑器最基本的使⽤莫过于获取⽂本和设置⽂本，介绍如下：
1. 获取编辑后的⽂本
根据官⽹介绍，创建编辑器后所有的操作都是针对上述js脚本中创建出来的editor对象进⾏的，但由于editor是⼀个局部变量，因此这⾥我们使⽤⾃定义的全局变量myEditor获取到该对象，后⾯按照如下⽅式调⽤即可
var result = Data();
如上
2. 向编辑器中预设⽂本
与上⾯类似，也是对myEditor的操作
myEditor.setData(content);
还有⼀种预设数据的⽅式，即在最开始的标签中预设内容，CKEditor初始化时，会将该预设内容初始化到编辑框中。
<textarea namen="content"id="editor">
<p>这⾥的内容会被初始化到编辑器中</p>
</textarea>
如上
3. 调整⼯具栏
可以对⼯具栏的⼯具进⾏定制，⽅法是在创建编辑器的create()⽅法中传⼊第⼆个参数：⼀个json对象数组，如下举个例⼦：
ClassicEditor
.create(document.querySelector("#editor"), {
toolbar: [ 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote' ]
})
.then(editor => {
console.log(editor);
})
.catch(error => {
<(error);
})
如下，⼯具栏中就只会出现加粗、斜体、⽆序列表、有序列表、块引⽤⼏个项
当然，还可以传⼊更多json对象来设置⼯具栏，如下除了对toolbar进⾏设置外，还对toolbar上的heading进⾏了设置
heading: {
options: [
{ modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' }
]
}
4.CKEditor默认内建的⼯具
⼀般，⼀个富⽂本编辑器会有很多各式各样的功能，如左右对齐、标题、加粗等，当然CKEditor⼀个也不会少，但我们下载的压缩包中并没有包含所有内容，默认只有如下⼏个功能
其余功能通过插件的⽅式向我们提供，余下功能包括如下：
向CKEditor 中添加新功能
向CKEditor添加新功能，这⾥只介绍向其中添加已有的插件，官⽅⽂档：
1. 下载NPM
CKEditor的各个插件是通过NPM进⾏发布的，需要使⽤NPM⼯具进⾏下载，⽽NPM是绑定在NodeJS上的，因此需要安装下载
NodeJS（， 在这个链接也可以看到NPM是什么，按照我⾃⼰的理解，NPM有⼀点向前端的MAVEN，将前端的各种功能整合为⼀个个包，通过NPM这个平台向⼤家分发，⽽NPM提供的命令⾏⼯具——CLI，就是与NPM平台交互的⽅式), 最简单的⽅式是直接下载⾮安装
包，解压即可⽤。
拿下来得到如下，这⾥我们最需要⽤到的就是这个npm⼯具(这⾥可能有⼏个⽂件和你解压出来的不⼀样，那是我后来加上去的，请⾃动忽
略)。
"undo", //撤销
"redo", //不撤销
"bold", //加粗
"italic", //斜体
"blockQuote",  //块引⽤
"imageTextAlternative", //⽤于图⽚加载不出来时替换显⽰的⽂字
"imageUpload", // 插⼊图⽚
"heading", // 标题
"imageStyle:full",  //图⽚与上下⽂组合⽅式：图⽚占⼀整⾏
"imageStyle:side",  //图⽚与上下⽂组合⽅式：图⽚在⽂字的旁边
"link", // 链接
"numberedList",  //有序列表
"bulletedList"    //⽆序列表
2. 了解webpack
在进⾏后⾯的步骤之前，建议先⼤致了解⼀下webpack这个⼯具，这篇⽂章可以说是写得很好了（）。如果像我⼀样是后端程序员，没有兴趣深⼊了解，可以按照⾥⾯所说的进⾏简单的练习，以对webpack有⼀个⽐较具体的了解，如果是前端程序员，你肯定需要深⼊了解的，请直接参考官⽹。
CKEditor提供的插件添加⽅式，默认认为⽤户使⽤的是NPM+webpack进⾏build，因此有必要进⾏了解，但是短时间的学习肯定还不能弄得很清楚，所幸CKEditor提供了完成的⼯程源码，我们可以从git上clone下来，然后仅仅修改配置⽂件，再重新build⼀下就可以得到带插件的js⽂件，以此⽂件替换原有的下载⽂件，就可以使⽤⼼的插件了。
3. 执⾏添加插件的步骤
这⾥以添加alignment插件为例
克隆整个⼯程到本地⽬录
// 克隆⼯程到本地
git clone -b stable github/ckeditor/ckeditor5-build-classic.git
// 跳转到⼯程根⽬录
cd ckeditor5-build-classic/
初始化npm
npm install //安装npm需要的所有默认插件
安装ckeditor插件
npm install --save-dev @ckeditor/ckeditor5-alignment
修改配置⽂件
/**
* @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md.
*/
'use strict';
// The editor creator to use.
editor: '@ckeditor/ckeditor5-editor-classic/src/classiceditor',
// The name under which the editor will be exported.
moduleName: 'ClassicEditor',
// Plugins to include in the build.
plugins: [
'@ckeditor/ckeditor5-essentials/src/essentials',
'@ckeditor/ckeditor5-adapter-ckfinder/src/uploadadapter',
'@ckeditor/ckeditor5-autoformat/src/autoformat',
'@ckeditor/ckeditor5-basic-styles/src/bold',
优秀的富文本编辑器'@ckeditor/ckeditor5-basic-styles/src/italic',
'@ckeditor/ckeditor5-block-quote/src/blockquote',
'@ckeditor/ckeditor5-easy-image/src/easyimage',
'@ckeditor/ckeditor5-heading/src/heading',
'@ckeditor/ckeditor5-image/src/image',
'@ckeditor/ckeditor5-image/src/imagecaption',
'@ckeditor/ckeditor5-image/src/imagestyle',
'@ckeditor/ckeditor5-image/src/imagetoolbar',
'@ckeditor/ckeditor5-image/src/imageupload',
'@ckeditor/ckeditor5-link/src/link',
'@ckeditor/ckeditor5-list/src/list',
'@ckeditor/ckeditor5-paragraph/src/paragraph',
'@ckeditor/ckeditor5-alignment/src/alignment'// new added
],
// Editor config.
config: {
toolbar: {
items: [
'heading',
'|',
'alignment',//new added
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'imageUpload',
'blockQuote',
'undo',
'redo'
]
},
image: {
toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
},
// UI language. Language codes follow the /wiki/ISO_639-1 format.        language: 'zh-cn'
}
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。