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;
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);
            });
}