富文本编辑器-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…

转载于:https://juejin.im/post/5b2b5706518825749f255459