富文本编辑器CKEditor 5的使用

富文本编辑器CKEditor 5的使用

记录了使用CKEditor的过程， 特殊强调，这里使用的是CKEditor5

向网页中添加CKEditor

只是向页面中添加该编辑器不需要什么特殊的操作，遵从以下步骤即可：
1. 下载js文件，并按照一般引用js的方式引用该js文件
下载地址：https://ckeditor.com/， 里面有CKEditor的相关介绍和各种教程，找到下载地址，下载即可，这里我选择的是下载ZIP压缩包，然后拷贝到工程目录下：

2. 在预期插入位置上填充textarea标签，然后使用js将该标签进行替换：
预期位置上的代码：

<textarea namen="content" id="editor">
    <p>这里的内容会被初始化到编辑器中</p>
</textarea>

js脚本（页面加载完成后运行）

var myEditor = null;
window.onload = function(){
     ClassicEditor
    .create(document.querySelector("#editor"))
    .then(editor => {
        myEditor = editor;
    })
    .catch(error => {
        console.error(error);
    });
}

得到的结果如下：

注意，正常情况下该插件是英文的，且没有对齐工具，上图是我添加插件并设置语言后的结果。

CKEditor的基本使用

对编辑器最基本的使用莫过于获取文本和设置文本，介绍如下：
1. 获取编辑后的文本
根据官网介绍，创建编辑器后所有的操作都是针对上述js脚本中创建出来的editor对象进行的，但由于editor是一个局部变量，因此这里我们使用自定义的全局变量myEditor获取到该对象，后面按照如下方式调用即可

var result = myEditor.getData();

如上
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 => {
        console.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一个也不会少，但我们下载的压缩包中并没有包含所有内容，默认只有如下几个功能

    "undo", //撤销
    "redo", //不撤销
    "bold", //加粗
    "italic", //斜体
    "blockQuote",  //块引用
    "imageTextAlternative", //用于图片加载不出来时替换显示的文字
    "imageUpload", // 插入图片
    "heading", // 标题
    "imageStyle:full",  //图片与上下文组合方式：图片占一整行
    "imageStyle:side",  //图片与上下文组合方式：图片在文字的旁边
    "link", // 链接
    "numberedList",   //有序列表
    "bulletedList"    //无序列表

其余功能通过插件的方式向我们提供，余下功能包括如下：

向CKEditor中添加新功能

向CKEditor添加新功能，这里只介绍向其中添加已有的插件，官方文档：
1. 下载NPM
CKEditor的各个插件是通过NPM进行发布的，需要使用NPM工具进行下载，而NPM是绑定在NodeJS上的，因此需要安装下载
NodeJS（https://www.npmjs.com.cn/getting-started/installing-node/， 在这个链接也可以看到NPM是什么，按照我自己的理解，NPM有一点向前端的MAVEN，将前端的各种功能整合为一个个包，通过NPM这个平台向大家分发，而NPM提供的命令行工具——CLI，就是与NPM平台交互的方式), 最简单的方式是直接下载非安装包，解压即可用。

拿下来得到如下，这里我们最需要用到的就是这个npm工具(这里可能有几个文件和你解压出来的不一样，那是我后来加上去的，请自动忽略)。

2. 了解webpack
在进行后面的步骤之前，建议先大致了解一下webpack这个工具，这篇文章可以说是写得很好了（https://www.jianshu.com/p/42e11515c10f）。如果像我一样是后端程序员，没有兴趣深入了解，可以按照里面所说的进行简单的练习，以对webpack有一个比较具体的了解，如果是前端程序员，你肯定需要深入了解的，请直接参考官网。
CKEditor提供的插件添加方式，默认认为用户使用的是NPM+webpack进行build，因此有必要进行了解，但是短时间的学习肯定还不能弄得很清楚，所幸CKEditor提供了完成的工程源码，我们可以从git上clone下来，然后仅仅修改配置文件，再重新build一下就可以得到带插件的js文件，以此文件替换原有的下载文件，就可以使用心的插件了。
3. 执行添加插件的步骤
这里以添加alignment插件为例

• 克隆整个工程到本地目录

// 克隆工程到本地
git clone -b stable https://github.com/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';

module.exports = {
    // 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 https://en.wikipedia.org/wiki/ISO_639-1 format.
        language: 'zh-cn'
    }
};

修改后的配置文件如上所示，仅仅增加了两行

• build

npm run build

执行上述命令，生成的文件在build文件夹下

• 替换js

将build生成的新的js文件替换到我们的工程中，既可按照正常工具的使用方式使用新增的插件。如下安装了alignment，并在配置时配置并添加了该工具到工具栏。

    <script type="text/javascript">
       var myEditor = null;
       window.onload = function(){
           ClassicEditor
           .create(document.querySelector("#editor"), {
               alignment: {
                   options: ['left', 'right']
               },
               toolbar: ["undo", "redo", "|", "alignment", "bold", "italic", "blockQuote", "imageTextAlternative", "imageUpload", "heading", "link", "numberedList", "bulletedList"]
           })
           .then(editor => {
               myEditor = editor;
           })
           .catch(error => {
               console.error(error);
           });
       }

       function haha(){
           console.log(Array.from(myEditor.ui.componentFactory.names()));
       }
    </script>