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

// 內(nèi)容數(shù)據(jù)綁定
const valueHtml = ref('<p>初始內(nèi)容</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
  
  // 監(jiān)聽編輯器變化
  editor.on('change', () => {
    console.log('內(nèi)容變化:', 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" />