vue-quill-text-editor

Quill rich text editor component encapsulated with Vue3

props:

name	type	default
placeholder	String
toolbarOptions	Array	official demo config
uploadFun	Function	rewrite image upload logic

---

1、install

npm install vue-quill-text-editor -D

2、import into project:

1import VueQuillTextEditor from 'vue-quill-text-editor';
2import 'vue-quill-text-editor/dist/vue-quill-text-editor.esm.css';
3
4...
5
6app.use(VueQuillTextEditor);
7
8app.mount("#app-wrapper");
9

3、get quill instance:

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

1
2setup() {
3    const quillRef = ref();
4    watch(quillRef, async (val) => {
5        const quillInstance = val.quillInstance;
6        quillInstance.enable(!props.disabledEdit);
7        quillInstance.on('text-change', () => {
8            // get html content
9            const content = quillInstance.container.firstChild.innerHTML;
10            console.log('quill content: ', content);
11        });
12        // set html content
13        quillInstance.container.firstChild.innerHTML = temp;
14    });
15    return {
16        quillRef,
17        place: 'this is a test.'
18    };
19}
20

4、 image upload with Url

this is my case:

1const doUpload = async (formData) => {
2    try {
3        // request is axios instance
4        const res = await request(API.uploadImage, formData, {
5            method: 'post',
6            headers: {
7                'Content-Type': 'multipart/form-data',
8            },
9        });
10        return res.url;
11    } catch (e) {
12        console.log(e);
13    }
14};
15
16const uploadFun = async (file) => {
17    try {
18        const oMyForm = new FormData();
19        oMyForm.append('fileField', file);
20        return new Promise((resolve, reject) => {
21            // do some validation
22            resolve(await doUpload(oMyForm));
23            ...
24        });
25    } catch (e) {
26        console.error(e);
27    }
28};

same as official quill, enjoy!