ckeditor5-build-classic使用

背景

• 他是啥？
  所见即所得的富文本编辑器。
• 为啥不用c4，而用c5?
  c4包里包含了工具栏里的所有组件，c5只包含部分，如果要添加组件还要重新打包，那为啥不选择c4呢？

1. c5对很多前端框架是做了兼容的，c4没有
2. c5包的体积较小
3. c5可以上传多文件
4. c5支持html5
5. c5好看

如何获取c5

点击这里获取
官方支持多用的安装方式，要是你不知道留哪些文件，可以参考这个

如何使用c5

官方指引
简单，粗暴的我使用了

<script src="[ckeditor-build-path]/ckeditor.js"></script>

创建实例
说明一下，要注意一下error-ckeditor-duplicated-modules这个错误，我临时的解决方案是将ckeditor.js放入一个公共的文件中，单次引入
其他的相关api，请点击

图片上传

文档参考

• 前端

var myeditor;
ClassicEditor
    .create( document.querySelector( '#TextArea1' ),{
        ckfinder: {
            uploadUrl: 'upload'
            //文件上传地址
        },
    } )
    .then( editor => {
        myeditor=editor;
    } )
    .catch( error => {
        console.error( error );
    } );

• 后端

@PostMapping("/upload")
    public void uploadImgs(@RequestParam("upload") MultipartFile file, HttpServletRequest request,
                          HttpServletResponse response) {
//写入文件 返回可以读取的路径
PrintWriter out = response.getWriter();
//错误返回
JSONObject res=new JSONObject();
                res.put("uploaded",false);
                JSONObject error=new JSONObject();
                error.put("message","文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）");

                res.put("error",error);
                out.println(res.toJSONString());
                return;
//正确返回
JSONObject res=new JSONObject();
            res.put("uploaded",true);
            res.put("url",cdnViewPath + fileName);
            out.println(res.toJSONString());
            return;
                          }

c5是集成了CKFinder的，如果你f12查看官方demo上传图片的例子，你会发现c5其实是循环两次调用了后台上传了图片，所以不要像我一样踩坑，研究了一天如何返回多张图片路径给c5

如何给c5添加组件？

官方示例
划重点
If you added or removed dependencies, you will also need to modify the src/ckeditor.js file.
build之后，去build 路径下找ckeditor.js文件，覆盖原来的引入的js

参考文档

c5
npm文档
git文档
webpack