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