vue3使用wangEditor 富文本编辑器

官方文档

https://www.wangeditor.com/

vue3使用

安装

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

wangEditor 组件封装

<!-- src/components/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>
  

使用案例

<!-- wangEditor富文本编辑器示例 -->
<script setup lang="ts">
import Editor from '../../components/wangEditor/index.vue';
const value = ref('初始内容121312413');
</script>

<template>
  <div class="app-container">
    {{ value }}
    <Editor v-model="value" style="height: 600px" />
  </div>
</template>

效果预览