CKEdictor5的使用

CKEdictor5的使用

在做一个博客项目的时候，感觉CKEditor5界面挺不错的，就自己用用看，在这里把使用时需要注意的内容给大家分享下，注意，这里只是本人使用时的操作流程。使用的工具是IDEA，后面上传图片时需要配置虚拟路径，其它好像没什么影响。

下载CKEditor5

首先，我们要先到官网下载CKEditor5，点击右上角download按钮，找到下载页面后选择所需类型的编辑器(本人使用的是classic)，之后有三种方法：

1. 用Node.js中的npm命令；如果对前端不熟悉且只想使用基本的功能可以不用这个。
2. 下载zip文件然后解压到项目中。我用的是这种，感觉最简单。
3. 直接引用。有兴趣的可以自己尝试下

导入项目并创建一个简单的CKEditor5框架

将下载的内容解压，复制到项目目录下，如图所示：

导入后可以打开index.html查看是否导入成功，若要在页面中引入js，则按照图片右侧格式来进行导入。之后可以按照官网上给出的模板来使用它：在body中添加

     <textarea name="content" id="editor">
          <p>123</p>
      </textarea>

在Script中添加

    ClassicEditor
        .create( document.querySelector( '#editor' ),{
/*            ckfinder: {
                uploadUrl: '${APP_PATH}/loadImage?command=QuickUpload&type=Files&responseType=json'
            }*/
            }
        } )
        .then(editor => {
        console.log( editor );
    } ).catch( error => {
        console.error( error );
    } );

这个要注意的点是textarea中的id要和ClassicEditor.create中的id相同。这里的代码和上图中的相同，注释中的ckfinder部分是图片上传时才用到。

图片上传

我是用ckfinder来建立请求的ckfinder: { uploadUrl: '${APP_PATH}/loadImage?command=QuickUpload&type=Files&responseType=json' },方法loadImage的功能是保存图片并返回图片地址的具体的方法如下图：

其中filepath是上传到磁盘上的路径，urlfileName是项目路径(图1中的photos目录下)，但在实际运行时需要设置虚拟路径，在IDEA中设置的步骤如下：
1.打开Edit Configurations,切换到Development，单击“+”按钮，选择External Source

2.选择之前的filepath的路径，Application context中设置为图片的上传目录，具体如上图所示。
3.除了上传路径外，还需要注意的是返回路径，参考了这里link。

中文设置

普通的设置方法并没有试过，我参考的是这里link评论中的方法，同时参考官方文档。如果知道怎么设置语言可以不看这部分。设置后的效果是这样的：

最后上传图片的效果图及传回前端的数据可以作为参考

这里特别说明一下：在插入图片后如果想要编辑前面的内容要按按键“↑”，按“↓”才能转到图片下方。

结语

本人对这部分知识也不是很熟悉，难免有些地方考虑不周，希望大家能能踊跃指出。