ckeditor5富文本编辑器填坑记录

个人需求

• 富文本
• 好看（样式现代点的）
• 上传图片能支持后端接口的（好多都是base64）
• 最后获得的富文本内容能好好的显示

选择使用ckeditor5以后，在简单时候时遇到了一些问题

• 上传图片接口服务器端不知道该返回什么格式的json
• 最终获得的富文本内容不能很好的展示

使用步骤

引入静态资源

<script src="https://cdn.ckeditor.com/ckeditor5/10.1.0/classic/ckeditor.js"></script>

使用cdn方式引入ckeditor.js，为何就这一个js呢，其余富文本库通常都有好几个，至少一个js文件和一个css样式文件，咱们接下去往下看

页面元素申明

<textarea class="form-control" name="comment" id="comment" cols="30" rows="10" placeholder="请输入评论"></textarea>

添加一个普通的文本域，重点是id

js初始化

var theEditor;
    ClassicEditor
    .create( document.querySelector( '#comment' ),{
        language:'zh-cn',//须要引入语言文件
        ckfinder: {
            uploadUrl: '/topic/upload'
        }
    })
    .then(function(editor){
        theEditor  = editor;
    }).catch(function(error){
        console.error(error);
});

踩的几个坑

如何上传图片以及自定义接口返回json的格式

官网给出了两个方法，一个是用Easy Image 一个云端平台，建立帐号，初始化时填入相关数据就能使用,除了与ckeditor整合程度搞以及提供基本的上传功能外，还能提供响应式方案（一次上传以后返回不一样大小的尺寸）、cdn，可是价格感人，放弃。
另外一种则是自定义上传接口（上面给出的代码）

ckfinder: {
                        uploadUrl: '/topic/upload'
        }

,可是找了一圈官方文档仍是没找response该返回的json格式，最后经过stackoverflow查到，
success response

{
    "uploaded": true,
    "url": "http://127.0.0.1/uploaded-image.jpeg"
}

failure response

{
    "uploaded": false,
    "error": {
        "message": "could not upload this image"
    }
}

获取富文本的内容

参考上面代码，父级域中声明一个变量（theEditor）,初始化时将ckeditor实例付给该变量，其余地方须要获取富文本内容时，使用

theEditor.getData();

渲染富文本内容时的样式问题

一般富文本编辑器有两种方式处理样式问题，一种是提供css（好像比较少见），好比生成的富文本内容中含有

<p class="left"></p>

ckeditor采用的是相似这种，可是他不须要你引用css文件，而是经过js将css样式插入到页面
提供的样式文件中有对应样式类的声明，
另外一种则为使用内联样式，将样式处理到生成的标签上，好比

<p sytle="float-left"></p>

直接ckeditor获取到内容渲染到页面后，发现样式不对，好比一张居右的图片，此时html内容为

<figure class="image image-style-side"><img src="http://olpyjtmgz.bkt.clouddn.com/FpTDzqcGv8BNQvHJWAmDGrpP9Eaf"></figure>

结果图片与富文本编辑器内的样式预览并不一致，经过查看编辑器内图片的样式发现

.ck-content .image>img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

样式申明在一个class为ck-content下，因此须要在渲染富文本内容的父级元素上添加clss为 ck-content

参考

自定义上传接口的response json