CKEditor5基本使⽤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;
ClassicEditor
.create(document.querySelector("#editor"), {
ckfinder: {
uploadUrl: '/admin.php/Common/ck_editor?command=QuickUpload&type=Files&responseType=json'
}
})
.then(editor => {
myEditor = editor;
// 设置初始值
myEditor.setData('');
})
editor bar.catch(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 = '' . $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 Data();
$('#editor').val(htmlStr);
配置⾃⼰的tarbar
var myEditor = null;
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 => {
<(error);
});
}