Vue3 encapsulates wangEditor plug-in

1. Summary

Usually in the development process, no matter what the background system or the company's internal system is, it is indispensable to use rich text boxes. A good rich text box can better edit and format our desired content, but today we mainly talk about wangEditor, a rich text box plug-in wangEditor

plugin installation

How to use the wangEditor plug-in and encapsulate the wangEditor component in vue3

Tool configuration and API configuration of wangEditor

2. Plug-in installation

npm install

CDN introduction

1.1, npm installation

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

2.1. Introduction of 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>

If the above CDN access is unsuccessful, you can find the JS CSS file in the installation package after the npm installation is complete. The steps are as follows:

Create a new test1 folder, open the console, navigate to the folder, execute npm install @wangeditor/editor or yarn add @wangeditor/editor
After the installation is complete, open node_modules/@wangeditor/editor/dist the folder to find the JS CSS file:
- index.js
- css/style.css
Copy these two files out, and then delete test1 the folder

3. Encapsulate the wangEditor component

Component packaging

use components

1. wangEditor component encapsulation

<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. Import and use components where wangEditor needs to be used

<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>

4. Tool configuration and API configuration of wangEditor

Related tool configuration and API configuration can refer to toolbar configuration | wangEditor document