vue3封装wangEditor插件

一、概要

平常在开发过程中，无论是什么后台系统还是公司内部的系统也好，都是少不了需要用到富文本框。一个好的富文本框能更好的编辑排版我们的想要内容，但今天主要讲的是wangEditor这个富文本框插件 wangEditor

1. 插件安装
2. 如何在vue3中使用wangEditor插件并封装wangEditor组件
3. wangEditor的工具配置与API配置

二、插件安装 

1. npm安装
2. CDN引入 

1.1、 npm安装

yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

2.1、CDN引入

<!-- 引入 css -->
<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">

<!-- 引入 js -->
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>
    var E = window.wangEditor; // 全局变量
</script>

如果上述 CDN 访问不成功，可以在 npm 安装完成之后，在安装包找到 JS CSS 文件，步骤如下：

• 新建一个 test1 文件夹，打开控制台，目录定位到该文件夹，执行 npm install @wangeditor/editor 或 yarn add @wangeditor/editor
• 安装完成，打开 node_modules/@wangeditor/editor/dist 文件夹，即可找到 JS CSS 文件：
  • index.js
  • css/style.css
• 把这俩文件拷贝出来，然后删掉 test1 文件夹

三、封装wangEditor组件 

1. 组件封装
2. 使用组件

1.  wangEditor组件封装

<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />
    <Editor
      style="height: 700px; overflow-y: hidden;"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @custom-paste="customPaste"
    />
  </div>
</template>

<script lang="ts" setup>
import '@wangeditor/editor/dist/css/style.css';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
import { reactive, onMounted, watch, onBeforeUnmount, shallowRef, ref } from 'vue';
interface Props {
  value: string;
}
const editorProps = defineProps<Props>();
const emit = defineEmits(['update:Html']);
// 内容HTML
const html = ref();

// 工具栏选项
const toolbarConfig = {
  excludeKeys: [
    'fullScreen',
	'code',
	'group-video',
	'codeBlock',
	'bulletedList',
	'numberedList',
	'blockquote',
	'bold',
	'italic',
	'todo',
	'insertImage',
	'insertLink',
	'emotion',
	'insertTable',
  ] // 此处不需要的工具栏选项
};

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容',
  MENU_CONF: {
    uploadImage: {
      // 自定义上传图片的接口地址
      server: import.meta.env.VITE_API_URL + "/api/.../...",
      
      // 自定义设置单个文件的最大体积限制，默认为 2M
      maxFileSize: 1 * 1024 * 1024, // 1M

      // 自定义设置最多可上传几个文件，默认为 100
      maxNumberOfFiles: 10,
      
      // 自定义设置选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
      allowedFileTypes: ['image/*'],

      // 自定义设置上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
      meta: {
        token: 'xxx',
        otherKey: 'yyy'
      },

      // 自定义设置将 meta 拼接到 url 参数中，默认 false
      metaWithUrl: false,

      // 自定义设置增加 http  header
      headers: {
        Accept: 'text/x-json',
        authorization: `Bearer ` + Session.get('token'),
      },

      // 自定义设置跨域是否传递 cookie ，默认为 false
      withCredentials: true,
     
      // 自定义设置超时时间，默认为 10 秒
      timeout: 5 * 1000, // 5 秒
    }
  }
  hoverbarKeys: {
    image: {
	  // 清空 image 元素的 hoverbar
	  menuKeys: [],
	},
  },
};

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

// 监听内容变化
watch(
  () => editorProps.value,
  (newVal: any) => {
     html.value = newVal;
  }
);
watch(
  () => html.value,
  (newVal: any) => {
     emit('update:HTML', newVal);
  }
);

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

 2. 需要使用wangEditor的地方导入使用组件

<template>
  <div class="container">
    <wangEditor :value="content" @update:HTML="editorContent" />
  </div>
</template>

<script lang="ts" setup>
import wangEditor from '/@/components/wangeditor/index.vue'; // 导入wangEditor组件
import { ref, onMounted } from 'vue';
import { api } from '/@/api/index.ts';  // 导入API接口

const content = ref();

// 获取内容数据
const getData = () => {
  api().then((res: any) => {
    if (res.code == 200) {
      content.value = res.data.content;
    };
  });
};

// 内容编辑
editorContent((val: any) => {
  content.value = val;
});

// 页面挂载时
onMounted(() => {
  getData();
});
</script>

四、 wangEditor的工具配置与API配置

相关的工具配置与API配置可以自行查阅 工具栏配置 | wangEditor  文档