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

Posted 2022-12-07 别Null.了

目录

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、结果展示