Vue3整合WangEditor富文本编辑器的实践指南

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

<template>
  <div class="editor-wrapper">
    <!-- 工具栏 -->
    <Toolbar 
      :editor="editorRef" 
      :defaultConfig="toolbarConfig"
    />
    
    <!-- 编辑器 -->
    <Editor
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      @onCreated="handleCreated"
    />
  </div>
</template>

<script setup>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 编辑器实例（必须使用 shallowRef）
const editorRef = shallowRef()

// 内容数据绑定
const valueHtml = ref('<p>初始内容</p>')
</script>

editorConfig.MENU_CONF['uploadImage'] = {
  allowedFileTypes: ['image/*'],
  customUpload: async (file, insertFn) => {
    try {
      const ossUrl = await uploadToOSS(file) // 对接云存储
      insertFn(ossUrl, '图片描述') // 插入编辑器
    } catch (error) {
      console.error('上传失败:', error)
    }
  }
}

// 父组件传值
watch(() => props.modelValue, (newVal) => {
  if (valueHtml.value !== newVal) {
    valueHtml.value = newVal
  }
})

// 子组件更新
watch(valueHtml, (newVal) => {
  emit('update:modelValue', newVal)
})

// 隐藏不常用功能
const toolbarConfig = {
  excludeKeys: [
    'fullScreen', 
    'codeBlock', 
    'code'
  ]
}

onMounted(() => {
  setTimeout(() => {
    const editor = editorRef.value
    const toolbar = DomEditor.getToolbar(editor)
    console.log(toolbar.getConfig().toolbarKeys)
  }, 1500)
})

onBeforeUnmount(() => {
  const editor = editorRef.value
  editor?.destroy() // 必须销毁实例
})

const handleCreated = (editor) => {
  editorRef.value = editor
  
  // 监听编辑器变化
  editor.on('change', () => {
    console.log('内容变化:', editor.getHtml())
  })
}

.editor-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid #eee;
}

editorConfig = {
  MENU_CONF: {
    uploadImage: {
      customAlert: (s) => { 
        alert(s) 
      }
    }
  }
}

<RichTextEditor v-model="content" />