聲明：所發文章樓主親測並在實際項目中使用的，引入編輯器的時候碰到了不少坑，爲了記錄一下，讓自己以後再次使用可以直接ctrl+c ctrl+v而寫，如果這篇文章對你有用就最好了
背景：在編輯器使用的時候最開始是用的wangeditor，主要原因是這貨非常輕量，體積超級小，但是由於公司的同事經常添加內容都是在word文檔直接複製粘貼的，有很多垃圾樣式wangeditor無法過濾，這個問題搞得我好煩，之前添加的5000+條內容垃圾樣式還要我過濾掉，迫不得已更換編輯器，百度谷歌了很久怎麼幹掉之前添加的內容帶上的word樣式，中途考慮過百度的ueditor(ps之前用過)我覺得太吃藕了，然後也沒用，最後決定用ckeditor5這個外觀還挺好看的，最主要的原因是這貨有自帶過濾複製站街過來的垃圾樣式，然後就開始了踩坑了。
例子：本文以tp5爲後端語言整合ckeditor5 圖片上傳
這裏的內容直接賦值粘貼過去您的html文件即可出現兩個編輯器如下圖：
溫馨提示：
1.注意：我引入的ckeditor.js是當前版本中最新的ckeditor5 版本哦，如果是4版本或其他版本的不在本文章討論範圍，版本不同可能有很多地方不同的哦，如果不想折騰直接用我這個版本的，按照本文來，其他版本出門左拐，百度,谷歌,看官網文檔
2.ckeditor5默認編輯器的高度設置可以通過css樣式來設置初始化ckeditor5的寬度和高度,代碼如下：
<!--ckeditor5默認編輯器的高度-->
<style>
.ck-editor__editable {
min-height: 100px;
}
</style>3.自定義ckeditor5的菜單欄，需要在實例化的時候配置，代碼的下面實例中有
4.ckditor5上傳圖片，需要返回json數據，字段return json([‘uploaded’=>true,’url’=>$url]);方可 預覽,成功true，失敗false，這裏我說的是ckditor5上傳圖片的返回值哦，必須回uploaded和url字段否則無法預覽，圖片會以url的形式保存到對應的textarea裏面
tp5 ckeditor5編輯器使用實例，代碼如下：
親們可直接複製代碼到你的html文件看效果，關於圖片上傳處理的後端邏輯，我這裏用的是tp5框架，其他語言其他框架，請自行編寫，對於後端的程序猿GG來說這個還是挺簡單，這裏不廢話，只要上傳保存好圖片，返回編輯器要的字段就行了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ckeditor5編譯器使用</title>
<script src="http://p9l6ece3c.bkt.clouddn.com/ckeditor.js"></script>
</head>
<body>
<h3>自定義菜單欄的ckeditor5編譯器初始化</h3>
<div class="row cl">
<div class="formControls col-xs-6 col-sm-6">
<textarea name="subject" id="ckeditor1"></textarea>
</div>
</div>
<!--ckeditor5默認編輯器的高度-->
<style>
.ck-editor__editable {
min-height: 100px;
}
</style>
<script>
ClassicEditor.create( ckeditor1,{
toolbar: ['imageUpload','link'],
ckfinder: {
uploadUrl : '/admin/Upload/uploadImages?command=QuickUpload&type=Files&responseType=json'
//後端處理上傳邏輯返回json數據,包括uploaded(選項true/false)和url兩個字段
}
}).then(
).catch()
</script>
<h3>默認菜單欄的ckeditor5編譯器初始化</h3>
<div class="row cl">
<div class="formControls col-xs-6 col-sm-6">
<textarea name="description" id="ckeditor2"></textarea>
</div>
</div>
<script>
ClassicEditor.create( ckeditor2,{
ckfinder: {
uploadUrl : '/admin/Upload/uploadImages?command=QuickUpload&type=Files&responseType=json'
//後端處理上傳邏輯返回json數據,包括uploaded(選項true/false)和url兩個字段
}
}).then(
).catch()
</script>
<!--/**
* 圖片上傳 written :yangxingyi 2018-06-06 15:35 (ps,這是tp5的上傳圖片寫法,其他編輯器的按要求寫即可)
*/
public function uploadImages($path=false,$save=false){
$file = request()->file('upload');
$path = $path?$path:ROOT_PATH . 'public/tmp/uploads/';
$save = $save?$save:SITE_URL.'/tmp/uploads/';
if($file){
$info = $file->move($path);
if($info){
$url = $save.$info->getSaveName();// 成功上傳後 獲取上傳信息
}else{
//$error = $file->getError();
}
}
$url = str_replace("\\","/",$url);//把url的\換成/
return json(['uploaded'=>true,'url'=>$url]);
}-->
</body>
</html>