今天给大家安利一个简约风的富文本编辑器：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去做一个图片上传，非常实用。
最后
看下效果：
