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

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

1、下载依赖npm i vue-quill-editor --S

必须搭配使用npm i @vueup/vue-quill --S（亲测有效）

此处使用版本："@vueup/vue-quill": "^1.0.0-alpha.40",、"vue-quill-editor": "^3.0.6",

2、引入：

import {QuillEditor } from '@vueup/vue-quill';import '@vueup/vue-quill/dist/vue-quill.snow.css';

3、使用过程直接附上代码如下：

*html部分*<QuillEditorref="myQuillEditor1"theme="snow"v-model:content="content1":options="editorOption"contentType="html"@update:content="setValue1()"/> *js部分*let content1 = ref('');const myQuillEditor1 = ref<HTMLDivElement | null>(null);const editorOption = ref({modules: {toolbar: [['bold', 'italic', 'underline', 'strike'],[{size: ['small', false, 'large', 'huge'] }],[{font: [] }],[{align: [] }],[{list: 'ordered' }, {list: 'bullet' }],[{indent: '-1' }, {indent: '+1' }],[{header: 1 }, {header: 2 }],['image'],[{direction: 'rtl' }],[{color: [] }, {background: [] }],],},placeholder: '请输入内容...',});onMounted(() => {// resultStr.value = Diff.diffChars('变更前内容', '变更后内容');// console.log('xxxxxxxxx', resultStr.value);toRaw(myQuillEditor1.value).setHTML(`<span class="highlight-insertion" style="color: red">哈哈哈哈哈哈</span>`,);});// 抛出更改内容，此处避免出错直接使用文档提供的getHTML方法const setValue1 = () => {const text = toRaw(myQuillEditor1.value).getHTML();console.log('111111', text);};