背景
- 他是啥?
所見即所得的富文本編輯器。 - 爲啥不用c4,而用c5?
c4包裏包含了工具欄裏的所有組件,c5只包含部分,如果要添加組件還要重新打包,那爲啥不選擇c4呢?
- c5對很多前端框架是做了兼容的,c4沒有
- c5包的體積較小
- c5可以上傳多文件
- c5支持html5
- 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
參考文檔