Vue3后台管理系统（十一）wangEditor富文本编辑器

╰半橙微兮° 2024-03-26 03:56 67阅读 0赞

**目录**

一、安装wangEditor依赖

二、WangEditor组件封装

三、使用案例

--------------------

#### 一、**安装wangEditor依赖** ####

npm install @wangeditor/editor --save

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

#### 二、WangEditor组件封装 ####

在src/components下新建WangEditor文件夹，并在WangEditor文件夹下新建index.vue

<template>
      <div style="border: 1px solid #ccc">
        
        <Toolbar
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            style="border-bottom: 1px solid #ccc"
            :mode="mode"
        />
        
        <Editor
            :defaultConfig="editorConfig"
            v-model="defaultHtml"
            @onChange="handleChange"
            style="height: 500px; overflow-y: hidden"
            :mode="mode"
            @onCreated="handleCreated"
        />
      </div>
    </template>
    
    <script setup lang="ts">
    import { onBeforeUnmount, shallowRef, reactive, toRefs } from 'vue';
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
    
    // API 引用
    import { uploadFileApi } from '@/api/file';
    
    const props = defineProps({
      modelValue: {
        type: [String],
        default: ''
      }
    });
    
    const emit = defineEmits(['update:modelValue']);
    
    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef();
    
    const state = reactive({
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            // 自定义图片上传
            async customUpload(file: any, insertFn: any) {
              uploadFileApi(file).then(response => {
                const url = response.data.url;
                insertFn(url);
              });
            }
          }
        }
      },
      defaultHtml: props.modelValue,
      mode: 'default'
    });
    
    const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state);
    
    const handleCreated = (editor: any) => {
      editorRef.value = editor; // 记录 editor 实例，重要！
    };
    
    function handleChange(editor: any) {
      emit('update:modelValue', editor.getHtml());
    }
    
    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value;
      if (editor == null) return;
      editor.destroy();
    });
    </script>
    
    <style src="@wangeditor/editor/dist/css/style.css"></style>

#### 三、使用案例 ####

在src/views/component下新建文件editor.vue

<script setup lang="ts">
    import Editor from '@/components/WangEditor/index.vue';
    import { ElForm } from 'element-plus';
    import { reactive, ref, toRefs } from 'vue';
    
    const dataFormRef = ref(ElForm);
    
    const state = reactive({
      formData: {
        content: '初始内容'
      }
    });
    
    const { formData } = toRefs(state);
    </script>
    <template>
      <div class="app-container">
        <el-form ref="dataFormRef" :model="formData">
          <editor v-model="formData.content" style="height: 600px" />
        </el-form>
      </div>
    </template>

![5d0eca7d8384472fbc69e9d7bf35f3ed.png][]

[5d0eca7d8384472fbc69e9d7bf35f3ed.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2611ea7529974d0f97ecdfc612a3a182.png