vue-quill-editor富文本编辑器使用

实现功能

1. 基本编辑器展示
2. 实现@功能

demo

<template>
  <div class="editor">
        <quill-editor
            v-model="value"
            :options="editorOptions"
            @change="onHandleChange"
        />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import Quill from 'quill'
import { quillEditor } from 'vue-quill-editor' // 引入富文本
import mention from 'quill-mention' // 引入mention 组件
import 'quill-mention/dist/quill.mention.min.css'
import 'quill/dist/quill.core.css'

import 'quill/dist/quill.snow.css'

import 'quill/dist/quill.bubble.css'

// 为quill 注册mention 组件
Quill.register({
    'modules/mention': mention,
})
@Component({
    components: {
        quillEditor,
    },
})
export default class Editor extends Vue {
    value = '';
    placeholder = '测试富文本';
    get editorOptions() {
        return {
            placeholder: this.placeholder,
            modules: {
                toolbar: [
                    [
                        'bold', 'underline',
                        { color: [] },
                        { list: 'ordered' },
                        { list: 'blullet' },
                    ]
                ],
                mention: {
                    allowedChars: /^[A-Za-\z]*$/,
                    mentionDenotationChars: ['@'],
                    offsetLeft: 4,
                    source: (searchTerm: any, renderList: any, mentionChar: any) => {
                        console.log(searchTerm, renderList, mentionChar);
                        const values = [{
                            id: 1,
                            value: 'temp-text',
                        }]
                        renderList(values);
                    },
                    renderList(values: any, searchTerm: any) {
                        console.log(values, searchTerm);
                    },
                    onSelect: (data: any, insertItem: any) => {
                        console.log('data', data, 'insertItem', insertItem);
                        const item = {
                            text: `@${data.value}`,
                            name: data.value,
                            id: data.id,
                        }
                        insertItem(data);
                    },
                    insertItem(data: any) {
                        console.log('insert--item', data);
                    }
                }
            }
        };
    }
    onHandleChange(val: string) {
        console.log('val', val);
    }
}
</script>

预览

参考资料

git地址 参考demo

TODO

实现满足更多需求的富文本编辑器