1.引入

<script type="text/javascript" src="/plugin/ckeditor5/ckeditor.js"></script>

2.html

<div class="form-group col-lg-12"><label class="control-label col-lg-3 text-right"><span class="control-label required-mark"></span>內容:</label><textarea class="form-control-erbi col-lg-5" name="editor" id="editor" /></textarea> </div>

3.樣式

<style>.ck-editor__main{width:75%;padding-right: 0;float: right;}.ck-editor__editable {min-height: 200px;} </style>

4.啟動

var myEditor = null; window.onload = function(){ClassicEditor.create(document.querySelector("#editor"), {ckfinder: {uploadUrl: '/admin.php/Common/ck_editor?command=QuickUpload&type=Files&responseType=json'}}).then(editor => {myEditor = editor;// 設置初始值myEditor.setData('');}).catch(error => {console.error(error);}); }

5.圖片上傳后臺，文件名默認為upload

public function ck_editor(){$config = array("savePath" => "./site_upload/ck_editor/" , //存儲文件夾"maxSize" => 1000000 , //允許的文件最大尺寸，單位KB"allowFiles" => array( ".gif" , ".png" , ".jpg" , ".jpeg" , ".bmp" ) //允許的文件格式);$up = new Uploader( "upload" , $config );$info = $up->getFileInfo();$info['url'] = substr($info['url'],1);$host_name = Func::getHostName();$url = 'http://' . $host_name . $info['url'];$qiniu = new QiniuImg();$ext = pathinfo($url, PATHINFO_EXTENSION);$name = time() . mt_rand() . '.' . $ext;$s = $qiniu->up($url, $name, config('app.qiniu.bucket'));if($s){@unlink('.'.$info['url']);$info['url'] = config('cdn_host').$name;}if ($info) {$this->json->setAttr('uploaded',true);$this->json->setAttr('url',[$info['url']]);$this->json->Send();} else {$this->json->setAttr('uploaded',false);$this->json->setErr(10099,'上傳失敗');$this->json->Send();} }

6.獲取內容

var htmlStr=myEditor.getData(); $('#editor').val(htmlStr);

配置自己的tarbar

var myEditor = null;window.onload = function(){ClassicEditor.create(document.querySelector("#editor"), {toolbar: ["undo", "redo", "|", "alignment", "bold", "italic", "blockQuote", "imageTextAlternative", "imageUpload", "heading", "link", "numberedList", "bulletedList"],ckfinder: {uploadUrl: '/admin.php/Common/ck_editor?command=QuickUpload&type=Files&responseType=json'}}).then(editor => {myEditor = editor;// 設置初始值myEditor.setData('');}).catch(error => {console.error(error);}); }

轉載于:https://www.cnblogs.com/jiqing9006/p/10256131.html

總結

以上是生活随笔為你收集整理的CKEditor5 基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。