富文本编辑器-CKeditor5

1.基本api

docs.ckeditor.com/ckeditor5/l…

2.初步实现

1.官网下载ckeditor.js，而后在html内引入
复制代码

html内容

<textarea class="ckeditor ck-heading_paragraph'" name="description" id="editor"/> <!---->
        <p>文本内容</p>
    </textarea>
复制代码

js部分 基础的建立了ckeditor

ClassicEditor
            .create( document.querySelector( '#editor' ),{
                
            }).then( editor => { //成功 这里面会有一个editor对象，会有各类方法，我写一些用到过的方法
            editor.model.change( writer => {
                        editor.setData('<p>ckeditor</p>');                                             //初始化富文本框，里面存字符串
                        editor.getData();                                                              //获取编辑框内的内容，传给后端
                        writer.insertText( '666', editor.model.document.selection.getFirstPosition() );//在文本光标处插入"666"字符
                    } );
                
            }).catch( error => { //失败
                console.error( error );
            } );
复制代码

效果

3如何涉及到图片 请看下面这个大神的

beidouxun.com/Articles/De…