关于富文本编辑器CKEditor5的填坑之路

4,575 阅读2分钟

先贴个官网,防止迷路

链接: ckeditor.com/ckeditor-5/

官方怕一形式单调,又给了几种(classic、balloon、balloon block、lnline、document

再来个效果


首先我们先介绍基本模式(classic)

我们先引入CKEditor5

<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>

接着创建dom

<div id="editor"></div>

然后初始化

<script>
    ClassicEditor.create(document.querySelector('#editor'))
        .then((editor)=>{         
            console.error(editor);
        })
        .catch(error => {
            console.error(error); 
        });    </script>  

保存代码 刷新代码,奇迹出现了👏👏👏👏


输入一下文本,完全ok,我们再来搞个图片进去,图片也可以成功的添加进入(注意:这里图片上传需要配置,后面会讲到,这里可以找一个在线图片然后复制进去),效果如下:


what?😰🤥😲😯😯😧🤭我的图片去哪了。后来找了好久也没找到为什么,不过发现他可以定制😀😀😀

定制链接:ckeditor.com/ckeditor-5/…

既然如此,我们先来看看定制的吧

选择一种模式,然后下一步,我这里选择的是Classic,原谅我电脑太小截不全吧


下一步之后,我们会看到让我们选择想要的功能,我这里是把关于图片的都选择上了,选择好之后我们就可以下一步


进入下一步后我们看到了编辑器的模样👏,然后我们添加删除一些功能,接着下一步,选择一下语言(选择中文哦),再下一步,然后start吧


等待它完成


激动人心的时刻来了,完成之后点击Download your custom CKEditor 5 build下载吧

打开我们刚刚下载的文件,把build里面的ckeditor.js 复制到我们demo里面,然后在html中引入,这个还没有完哦,还需要改一下代码,加入toobar,定义一下我们需要的功能,然后就可以刷新了

ClassicEditor 
    .create(document.querySelector('#editor'), { 
        toolbar: {                    
            items: ['heading','|','bold','link','bulletedList','numberedList', '|','imageUpload','|','fontSize','fontColor','fontBackgroundColor','fontFamily','undo','redo']
        },               l
        anguage: 'zh',                
        image: {                    
            toolbar: [ 'imageTextAlternative','imageStyle:full','imageStyle:side'] 
        },                
        licenseKey: '',            
    })   
    .then((editor)=>{    
       console.error(editor);            
    })     
    .catch(error => {        
        console.error(error);                
    });

哎呀,没问题👏👏


搞一个图片进去试试,ok,可以缩放,不过要注意他这个缩放是按百分比的,这个不是很友好


接下来,我们说说图片上传

看了官网的上传,搞了半天不对,还是自定义上传适配器吧ckeditor.com/docs/ckedit…

啥也不说,上代码

        //  上传适配器,格式官网上有,以一种Promise 的方式。Promise好像是有阻塞的意思在里面。        
class UploadAdapter {            
    constructor(loader) {               
         this.loader = loader;            
    }            
    upload() { 
        return new Promise((resolve, reject) => { 
            const data = new FormData();                    
            this.loader.file.then((res) => {
                data.append('file', res);                        
                data.append('token', '122');                        
                $.ajax({                            
                    url: '/upload',                            
                    type: 'POST',                            
                    data: data,                            
                    dataType: 'json',                            
                    processData: false,                            
                    contentType: false,                            
                    success: function (data) {                                
                        if (data) {                                     
                             resolve({                                        
                                    default:data.url
                                });                                
                        } else {
                          reject(data.msg); 
                        }                            
                    }                        
                })                    
            });                    
        });            
      }            
    abort() {                
      }        
}

// 然后,我们在初始化then里面写 加载了适配器 
editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    console.log(loader, './/loader/')                    
    return new UploadAdapter(loader);                
};

运行,上传成功了


总结

这里主要就介绍classic,其他模式的都是同理。

如果有不足或者不对的地方,欢迎留言补充👻