Vue3封装Quill富文本组件：vue-quill-text-editor

更新 2022-11-09

这个仓库现在问题太多，已经不太推荐了，刚需可用 https://github.com/ueberdosis/tiptap

为了不误人子弟，特此更新。

---

今天给大家安利一个简约风的富文本编辑器：Quill。平时项目开发，或多或少会接触富文本的需求，国内比较有名的应该是百度的Ueditor富文本编辑器了,不过它的画风实在有点老古董的感觉：

放眼望去，有点晕，哈哈。

1、Quill

而quill 画风就简约多了：

虽然功能可能没有Ueditor多，但是，基本功能都有，稍为定制一下就行。

2、vue-quill-text-editor

基于Vue3，我封装了一个Quill组件，简单易用 接下来，我把我定制的版本分享给大家： vue-quill-text-editor

原有官方的插件，去掉了getHtml()这个Api，但是有时候项目开发还是需要的，所以，我骇客了这个功能，具体如下：

setup() {
    const quillRef = ref();
    watch(quillRef, async (val) => {
        const quillInstance = val.quillInstance;
        quillInstance.on('text-change', () => {
            // get html content
            const content = quillInstance.container.firstChild.innerHTML;
            console.log('quill content: ', content);
        });
        // set html content
        quillInstance.container.firstChild.innerHTML = temp;
    });
    return {
        quillRef,
    };
}

基本意思就是innerHTML不管它Api怎么删掉，基本的Html功能还是可行的，所以直接用这个设置Content就行。

3、实现图片上传和Url嵌入

Quill上传图片现在默认会把图片转成Base64格式， 而实际开发中，我们需要的是把图片上传到CDN，转换成url再保存内容，这样，内容不会过大，同时也是访问友好的。下面看下我的实现：

<vue-quill-text-editor  ref="quillRef" :placeholder="place" :uploadFun="uploadFun" />

...

const doUpload = async (formData) => {
    try {
        // request is axios instance
        const res = await request(API.uploadImage, formData, {
            method: 'post',
            headers: {
                'Content-Type': 'multipart/form-data',
            },
        });
        return res.url;
    } catch (e) {
        console.log(e);
    }
};

const uploadFun = async (file) => {
    try {
        const oMyForm = new FormData();
        oMyForm.append('fileField', file);
        return new Promise((resolve, reject) => {
            // do some validation
            resolve(await doUpload(oMyForm));
            ...
        });
    } catch (e) {
        console.error(e);
    }
};

...

基本功能已经封闭在组件中了，调用的时候只需要实现uploadFun方法即可。我这里的实现就是用formData， 加上Axios去做一个图片上传，非常实用。

最后

看下效果：

传送门： vue-quill-text-editor