博客

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部分*
 <QuillEditor
              ref="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);
  };