WangEditor结合vue3

弹窗组件

<template>

  <div>

    <div class="menu" ref='editor'></div>

  </div>

</template>

<script>

import { reactive, toRefs, ref, onMounted, onBeforeUnmount, watchEffect, watch } from 'vue'

import WangEditor from 'wangeditor';

import { base64ToFile, getStore } from "@/utils/utils";

import axios from 'axios'

 

export default {

  // 设置富文本编辑器的HTML内容

  props: {

    contentHtml: {

      type: String,

      default: ''

    }

  },

  setup(props, content) {

    // 获取编辑器实例html

    const editor = ref();

    const state = reactive({

      instance: null

    })

    watch(

      () => props.contentHtml,

      (count) => {

        if (count !== state.instance.txt.html()) {

          state.instance.txt.html(count)

        }

      }

    )

    // 编辑器实例对象

    onMounted(() => {

      // 编辑器实例对象

      state.instance = new WangEditor(editor.value);

      // 自定义菜单(设置菜单)

      state.instance.config.menus = [

        'head',

        'bold', //字体加粗

        'fontSize',//字号

        'fontName',//字体

        'italic',

        'underline',//下划线

        'strikeThrough',//删除线

        // 'indent',

        // 'lineHeight',

        'foreColor',

        // 'backColor',

        'link',

        'list',//列表

        // 'todo',

        'justify',//对其

        // 'quote',// 引用

        'emoticon',

        'image',

        // 'video',//视频

        // 'table',//表格

        'code',

        // 'splitLine',

        'undo',//撤销

        'redo',//恢复

      ];

      // 开启本地上传图片(这是后端上传链接)

      // state.instance.config.uploadImgServer = '/exam/manage/file/img/upload';

      // 限制上传图片格式

      state.instance.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];

      // // 开启本地上传视频(这是后端上传链接)

      // state.instance.config.uploadVideoServer = '/api/upload-video';

      // 设置编辑器高度

      state.instance.config.height = 250;

      // 设置编辑器页面层级

      state.instance.config.zIndex = 100;

      state.instance.config.uploadImgShowBase64 = true

      // 设置编辑器placeholder

      state.instance.config.placeholder = '请输入内容！';

      // 配置编辑器显示颜色

      state.instance.config.colors = [

        '#ffffff',

        '#000000',

        '#f2f2f2',

        '#d8d8d8',

        '#bfbfbf',

        '#a5a5a5',

        '#595959',

        '#3f3f3f',

        '#0c0c0c',

        '#c00000',

        '#ff0000',

        '#ffc000',

        '#ffff00',

        '#92d050',

        '#00b050',

        '#00b0f0',

        '#0070c0',

        '#002060',

        '#7030a0',

        '#7f7f7f',

        '#366092',

        '#244061',

        '#953734',

        '#632423'

      ];

      state.instance.config.fontNames = [

        '黑体',

        '仿宋',

        '楷体',

        '标楷体',

        '华文仿宋',

        '华文楷体',

        '宋体',

        '微软雅黑',

      ];

      state.instance.config.fontSizes = {

        'x-small': { name: '12px', value: '1' },

        'small': { name: '14px', value: '2' },

        'normal': { name: '16px', value: '3' },

        'large': { name: '18px', value: '4' },

        'x-large': { name: '20px', value: '5' },

        'xx-large': { name: '24px', value: '6' },

        'xxx-large': { name: '32px', value: '7' },

      }

      // 忽略粘贴内容中的图片

      state.instance.config.pasteIgnoreImg = true;

      // 自定义上传

      state.instance.config.customUploadImg = function (file, insertFn) {

        let json = new FormData()

        json.append("file", file[0]);

        const token = getStore('VST_EXAM_TOKEN') || {}

        const Authorization = getStore('VST_EXAM_AUTHOR') || { Authorization: `'','','',3,20,''` }

        axios.post("/exam/manage/file/img/upload", json, {

          headers: {

            Authorization: Authorization.Authorization,

            Token: `Bearer ${token.token}`,

            platformHeadType: 'managePlatform',

            'Content-Type': 'application/x-www-form-urlencoded'

          }

        }).then(res => {

          if (res.data.code == 200) {

            insertFn(res.data.data.fileUrl)

          } else {

            console.log(res);

          }

        })

      }

      Object.assign(state.instance.config, {

        // wangeditor 值发生变化的时候

        onchange() {

          // 将值state.instance.txt.html() 传递至父组件

          let json = {

            html: state.instance.txt.html(),

            text: state.instance.txt.text(),

          }

          content.emit('getWangEditorValue', json.html);

        },

        // 上传网络图片回调

        // linkImgCallback(src) {

        //   console.log('图片 src ', src)

        // },

        // // 上传网络视频回调

        // onlineVideoCallback(video) {

        //   // 自定义回调内容，内容成功插入后会执行该函数

        //   console.log('插入视频内容', video)

        // }

      });

      state.instance.create();

      // 设置富文本编辑器的页面内容，父组件传递的

      state.instance.txt.html(props.contentHtml)

    });

    //  页面卸载(组件销毁时，也及时销毁编辑器)

    onBeforeUnmount(() => {

      state.instance.destroy();

      state.instance = null;

    });

    return {

      ...toRefs(state),

      editor,

    };

  },

}

</script>

<style lang="scss" scoped>

.menu {

  :deep(.w-e-menu) {

    z-index: 2 !important; // 这是工具栏

  }

  :deep(.w-e-text) {

    z-index: 1 !important; // 这是内容框

  }

  :deep(.w-e-toolbar) {

    z-index: 104 !important;

  }

}

</style>

调用

<Ueditor ref="refUeditor" @getWangEditorValue="getWangEditorValue" :contentHtml="contentHtml" />

import Ueditor from '../components/Ueditor'

export default {

  components: { Ueditor },

        setup(props){

const state = reactive({

      dialogVisible: false,

       contentHtml: "",//contentHtml:'渲染的富文本内容'

}

} 

//  refUeditor.value.instance.txt.clear()// 清空富文本编译器内容