ckeditor5 創建使用 · WEB 摘要

CKEditor5 + ckfinder3(php) CKEditor5資源下載，這里我們選擇ckeditor5-build-classic下載： https://ckeditor.com/ckeditor-5-builds/download/ ckfinder3選擇PHP版本下載： https://ckeditor.com/ckeditor-4/download/#ckfinder CKEditor5安裝前請注意，我發現IE11瀏覽器有可能是不支持CKEditor5的，調試瀏覽器最好是用最新版本的火狐。 CKEditor5快速安裝方法： https://docs.ckeditor.com/ckeditor5/latest/builds/guides/quick-start.html#classic-editor ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CKEditor 5 - Classic editor</title> <script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script> </head> <body> <h1>Classic editor</h1> <textarea name="content" id="editor"> <p>This is some sample content.</p> </textarea> <script> ClassicEditor .create( document.querySelector( '#editor' ) ) .catch( error => { console.error( error ); } ); </script> </body> </html> ``` 上邊的代碼保存example.html，放到網站根目錄下運行。 ClassicEditor is not defined 如果輯編器不出現，并且在console中有這個錯誤提示，證明你的瀏覽器不支持ckeditor5，請用最新版本的火狐。沒有上述的問題，把<script src="https://cdn.ckeditor.com/ckeditor5/10.0.0/classic/ckeditor.js"></script>換成本地鏈接就好。 ckfinder安裝方法：把ckfinder解壓后，放到網站根目錄下。打開http://localhost/ckfinder/ckfinder.html 會出現如下提示： The file browser is disabled for security reasons. Please contact your system administrator and check the CKFinder configuration file. 打開ckfinder/config.php 把false改成true，保存。 $config['authentication'] = function () { return true; }; 再次訪問http://localhost/ckfinder/ckfinder.html 正常顯示，測試上傳圖片功能是否正常。注意：上傳圖片不要帶中文漢字，全改成英文或數字，不然會造成亂碼，不能返回圖片。更改上傳文件路徑 ``` $config['backends'][] = array( 'name' => 'default', 'adapter' => 'local', 'baseUrl' => '/ckfinder/userfiles/', // 'root' => '', // Can be used to explicitly set the CKFinder user files directory. 'chmodFiles' => 0777, 'chmodFolders' => 0755, 'filesystemEncoding' => 'UTF-8', ); ``` 'baseUrl' => '/ckfinder/userfiles/'，這個自定義上傳圖片路徑，更改這里即可。 CKEditor5+ckfinder(php)結合解決方法： ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CKEditor 5 - Classic editor</title> <script src="/ckeditor/ckeditor.js"></script> <script src="/ckeditor/translations/zh-cn.js"></script> </head> <body> <h1>Classic editor</h1> <textarea name="content" id="editor" rows="10"> <p>This is some sample content.</p> </textarea> <script type="text/javascript"> ClassicEditor .create( document.querySelector( '#editor' ), { //工具欄，可選擇添加或去除 //toolbar: ['headings', 'bold', 'italic', 'blockQuote', 'bulletedList', 'numberedList', 'link', 'ImageUpload', 'undo'], //editor加載中文簡體，默認是英文 language: 'zh-cn', ckfinder: { uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json' } } ) .catch( error => { console.error( error ); } ); </script> </body> </html> ``` CKEditor5，ckfinder減肥（可忽略）由于下載的文件中帶有一些用不上的語言包和案例，為了減少空間，可以把這些文件刪除 CKEditor5刪除文件：刪除\ckeditor\LICENSE.md 刪除\ckeditor\README.md 保留\ckeditor\translations下只留用得上的語言包，其他刪除。比如我，只留一個zh-cn.js ckfinder刪除文件：刪除\ckfinder\samples 刪除\ckfinder\userfiles　　//如果不更改上傳圖片路徑，這個保留不冊刪除\ckfinder\CHANGELOG.html 刪除\ckfinder\ckfinder.html 刪除\ckfinder\LICENSE.html 刪除\ckfinder\README.html 刪除\ckfinder\lang下只留用得上的語言包，其他刪除。比如我，只留一個zh-cn.json ckeditor5+ckfinder(php)整合下載，本人測試直接在網頁上下載是失敗的，請用迅雷，雖然慢點，但好歹也可以下載。下載地址：https://files.cnblogs.com/files/iasnsqt/ckeditor-ckfinder.rar 總結：注意瀏覽器是否兼容ckeditor5，還有ckeditor和ckfinder路徑問題。簡易代碼 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ckeditor5編譯器使用</title> <script src="build/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>  <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>  </body> </html> ```