vue-quill-editor，WangeEitor实现富文本编辑器

目录

vue2---使用vue-quill-editor

1、安装vue-quill-editor模块

2、将vue-quill-editor引入到项目中 

3、创建组件

4、结果展示 

vue3---使用WangEditor

1、安装模块

2、创建组件 

3、结果展示

---

vue2---使用vue-quill-editor

1、安装vue-quill-editor模块

npm install vue-quill-editor -S

2、将vue-quill-editor引入到项目中 

//将其挂载到组件中
import { quillEditor } from 'vue-quill-editor';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
 
export default {
  components: {
    quillEditor
  }
}

3、创建组件

<template>
  <quill-editor 
    @focus="focusFn($event)"
    class="ql-editor"
    ref="myTextEditor" 
    v-model="config.annoText" :options="editorOption" 
    style="height:350px;"
    @change="onEditorChange($event)"
  ></quill-editor>
  <div class="length-limit">{{tiLength}}/200&nbsp;&nbsp;</div>
</template>

<script>
  //配置富文本编辑器内容
  const barOprions = [
      ['undo', 'redo', 'bold', 'italic', 'underline', 'strike'], //切换按钮(撤销 恢复 加粗 斜体 下划线 删除线)
      ['blockquote', 'code-block'],  //引用 代码块
      [{ header: 1 }, { header: 2 }],   //1、2级标题
      [{ list: 'ordered' }, { list: 'bullet' }],   //有序、无序列表
      [{ script: 'sub' }, { script: 'super' }],   // 上标/下标
      [{ indent: '-1' }, { indent: '+1' }],     // 减少缩进/缩进
      [{ direction: 'rtl' }],                 // 文本方向
      //[{ size: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], //字体大小
      [{ header: [1, 2, 3, 4, 5, 6, false] }],   //标题
      [{ color: [] }, { background: [] }],  //字体颜色，字体背景颜色
      // [{ font: [] }],  //字体种类
      [{ align: [] }],   //对齐方式
      ['clean'],    //清除文本格式
      //['image','video']   //链接、图片、视频
];
  export default {
    data() {
      return {
        tiLength: '',
        editorOption: {
          modules: {
            undo_redo: true,
            toolbar: barOprions,
          },
          placeholder: '编辑文章内容',
        },
      }
    },
    props: {
      canEdit: {
        type: Boolean,
      },
      config: {
        default: ()=>{},
        type: Object,
      },
    },
    components: {   //挂载的组件
      quillEditor,
    },
    mounted() {
      this.tiLength = this.$refs.myTextEditor.quill.container.textContent.length;
    },
    methods: {   //组件中所用到的方法
      onEditorChange(event) {
        event.quill.deleteText(200, 1);
        this.tiLength = this.$refs.myTextEditor.quill.container.textContent.length;
      },
      focusFn(event) {
        if (!this.canEdit) {
          event.enable(false);
        }
      },
    },
  }
</script>

4、结果展示 

vue3---使用WangEditor

1、安装模块

npm install @wangeditor/editor --save

2、创建组件 

<template>
  <div>
    <div ref="editor" style="width: 600px"></div>
    <div :innerHTML="content.html"></div>
  </div>
</template>

<script lang="ts">
import { onMounted, onBeforeUnmount, ref, reactive, defineComponent } from 'vue';
import WangEditor from 'wangeditor';

export default defineComponent({
  name: 'Editor',
  setup() {
    const editor = ref();
    const content = reactive({
      html: '',
      text: '',
    });

    let instance: any;
    onMounted(() => {
      instance = new WangEditor(editor.value);
      Object.assign(instance.config, {
        onchange() {
          content.html = instance.txt.html();
        },
      });
      instance.create();
    });

    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });

    return {
      editor,
      content,
    };
  },
});
</script>

<style lang="scss" scoped>
:deep(.w-e-text-container) {
  z-index: 99 !important;
}
</style>

3、结果展示