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

            });

}