富文本编辑器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>
阅读更多

没有更多推荐了,返回首页