在vue中使用富文本WangEditor

在vue3中使用WangEditor:

需要用到的插件: @wangeditor/editor和@wangeditor/editor-for-vue

npm install @wangeditor/editor @wangeditor/editor-for-vue --save

关于WangEditor的配置

将WangEditor封装成一个组件

// WangEditor.vue
<script setup>
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { DomEditor } from '@wangeditor/editor';
import { useEditorStore } from '@/stores/modules/editor.js';
import { storeToRefs } from 'pinia';
import { useRouter, useRoute } from 'vue-router';
const { articleForm, editorData } = useEditorStore();
const currRoute = useRoute();
let { fid, status } = currRoute.query;

// 每次进入初始化
const initFoo = () => {
  articleForm.content = '';
};
initFoo();

// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef();

// 模拟 ajax 异步获取内容
onMounted(() => {
  if (fid && status) {
    useEditorStore()
      .getAloneArticle(status, fid)
      .then((res) => {
        articleForm.content = res.content;
      });
  }
  status = 0;
  return;
});
/* 编辑器的基本配置 */

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',

  MENU_CONF: {
    /* 菜单配置，下文解释 */
    uploadImage: {
      server: '/api/gj/func/load/',
      fieldName: 'file',
      meta: {
        key: 'django-insecure-i',
      },

      maxFileSize: 5 * 1024 * 1024, // 1M
      allowedFileTypes: ['jpg', 'png', 'jpeg', 'gif'],
      metaWithUrl: false,
      // 最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      withCredentials: true,
      // 超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
      customInsert(res, insertFn) {
        insertFn(res.data);
      },
    },
  },
};
/* 工具栏配置 */
const toolbarConfig = {
  toolbarKeys: [
    'bold',
    'clearStyle',
    'color',
    'bgColor',
    '|',
    // 菜单组，包含多个菜单
    {
      key: 'group-image', // 必填，要以 group 开头
      title: '图片', // 必填
      menuKeys: ['uploadImage', 'insertImage'],
    },
    {
      key: 'group-video',
      title: '视频',
      iconSvg: '',
      menuKeys: ['insertVideo', 'uploadVideo'],
    },
    {
      key: 'group-link',
      title: '链接',
      menuKeys: ['insertLink', 'editLink', 'unLink', 'viewLink'],
    },
    {
      key: 'group-table',
      title: '表格',
      menuKeys: [
        'insertTable',
        'deleteTable',
        'insertTableRow',
        'deleteTableRow',
        'insertTableCol',
        'deleteTableCol',
        'tableHeader',
        'tableFullWidth',
      ],
    },
    'divider',
    'emotion',
    'blockquote',
    'headerSelect',
    'redo',
    'undo',
    'fullScreen',
  ],
  excludeKeys: ['group-table', 'group-link', 'group-video'],
};
const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};

// 组件销毁时，及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value;
  if (editor == null) return;
  editor.destroy();
});
</script>

<template>
  <div style="border: 1px solid #ccc">
    <!-- 工具栏 -->
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      style="border-bottom: 1px solid #ccc"
    />
    <!-- 编辑器 -->
    <Editor
      v-model="articleForm.content"
      :defaultConfig="editorConfig"
      style="height: 80vh; overflow-y: hidden"
      @onCreated="handleCreated"
    />
  </div>
</template>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.w-e-text-container {
  height: 500px !important; /*!important是重点，因为原div是行内样式设置的高度300px*/
}
</style>