安装

安装 editor

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

安装 Vue3 组件(可选)

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

封装wangeditor.vue

<template>
  <div class="editor-wrapper">
    <Toolbar
      :editor="editorRef"
      :defaultConfig="toolbarConfig"
      class="toolbar"
    />
    <Editor
      :modelValue="modelValue"
      :defaultConfig="editorConfig"
      :mode="mode"
      class="editor-content"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script setup>
import { ref, shallowRef, watch, onBeforeUnmount } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  height: {
    type: Number,
    default: 450
  },
  placeholder: {
    type: String,
    default: '请输入内容...'
  }
})

const emit = defineEmits(['update:modelValue'])

// 编辑器实例
const editorRef = shallowRef()
const mode = 'default'

// 工具栏配置
const toolbarConfig = {
  excludeKeys: [
    'fullScreen',
    'insertTable',
    'codeBlock',
    'group-video'
  ]
}

// 编辑器配置
const editorConfig = {
  placeholder: props.placeholder,
  scroll: false,
  MENU_CONF: {
    uploadImage: {
      server: '/api/upload', // 替换为实际接口
      fieldName: 'file',
      maxFileSize: 5 * 1024 * 1024, // 5MB
      allowedFileTypes: ['image/*'],
      customInsert(res, insertFn) {
        insertFn(res.data.url)
      }
    }
  }
}

// 处理编辑器创建
const handleCreated = (editor) => {
  editorRef.value = editor
  // 初始化内容回显
  editor.setHtml(props.modelValue)
}

// 处理内容变化
const handleChange = (editor) => {
  const html = editor.getHtml()
  emit('update:modelValue', html)
}

// 监听外部数据变化
watch(() => props.modelValue, (newVal) => {
  if (editorRef.value && newVal !== editorRef.value.getHtml()) {
    editorRef.value.setHtml(newVal)
  }
})

// 组件销毁时清理
onBeforeUnmount(() => {
  if (editorRef.value) {
    editorRef.value.destroy()
    editorRef.value = null
  }
})
</script>

<style scoped>
.editor-wrapper {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.toolbar {
  border-bottom: 1px solid #ebeef5;
}

.editor-content {
  min-height: v-bind('props.height + "px"');
  padding: 10px 15px;
  overflow-y: auto;
}
</style>

页面中使用

<template>
       <WangEditor 
            v-model="content "
            placeholder="请输入内容"
            :height="400"
      />
</template>
<script>
import WangEditor from '@/components/WangEditor.vue'
export default {
  components: {WangEditor }
}
  setup() {
    const content = ref('<p>初始内容</p>')
    return{
      content 
    }
}
</script>

页面展示

image.png

WangEditor 官网地址：https://www.wangeditor.com/v5/installation.html

配置工具栏

默认展示工具栏全部，可通过配置隐藏

// 工具栏配置
const toolbarConfig = {
  excludeKeys: [
    'fullScreen',
    'insertTable',
    'codeBlock',
    'group-video',
    'emotion',
    'insertImage',
    'insertVideo',
    'insertLink',
    'code',
    'group-image',
    'blockquote',
    'group-more-style',
    'headerSelect',
    'todo',
    'fontSize',
    'fontFamily',
    'divider',
    'lineHeight',
    'color',
    'bgColor',
    'italic',
    'underline',
    'bold'
    
  ]

可在控制台查找，工具名称对应标签中的data_menu_key的属性值

image.png

隐藏后的页面

image.png