富文本编辑示例

使用 WangEditor 实现富文本编辑功能。

功能特性

• 📝 富文本编辑 - 支持多种文本格式
• 🖼️ 图片上传 - 支持图片插入和上传
• 📎 附件支持 - 支持文件上传
• 🔧 工具栏定制 - 可自定义工具栏

安装依赖

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

基础用法

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

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

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

// 内容
const content = ref('<p>请输入内容...</p>')

// 工具栏配置
const toolbarConfig = {
  excludeKeys: []
}

// 编辑器配置
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: '/api/upload/image',
      fieldName: 'file'
    }
  }
}

// 编辑器创建完成
const handleCreated = (editor) => {
  editorRef.value = editor
}

// 组件销毁前销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor) {
    editor.destroy()
  }
})
</script>

<style scoped>
.editor-container {
  border: 1px solid #ccc;
  z-index: 100;
}
</style>

完整示例

<template>
  <div class="page-container">
    <div class="toolbar">
      <h2 class="page-title">富文本编辑示例</h2>
      <div>
        <el-button @click="getContent">获取内容</el-button>
        <el-button @click="setContent">设置内容</el-button>
        <el-button @click="clearContent">清空</el-button>
      </div>
    </div>
    
    <div class="editor-wrapper">
      <Toolbar
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        mode="default"
        class="toolbar"
      />
      <Editor
        v-model="content"
        :defaultConfig="editorConfig"
        mode="default"
        @onCreated="handleCreated"
        class="editor"
      />
    </div>
    
    <div class="content-preview">
      <h3>HTML 内容预览：</h3>
      <pre>{{ content }}</pre>
    </div>
  </div>
</template>

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

const editorRef = shallowRef()
const content = ref('<p>欢迎使用 <b>WangEditor</b> 富文本编辑器</p>')

const toolbarConfig = {}

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: '/api/upload/image',
      fieldName: 'file',
      onSuccess(file, res) {
        ElMessage.success('上传成功')
      },
      onFailed(file, res) {
        ElMessage.error('上传失败')
      }
    }
  }
}

const handleCreated = (editor) => {
  editorRef.value = editor
}

const getContent = () => {
  ElMessage.success('内容已打印到控制台')
  console.log('HTML 内容:', content.value)
  console.log('Text 内容:', editorRef.value?.getText())
}

const setContent = () => {
  content.value = '<p>这是 <span style="color: red;">新设置</span> 的内容</p>'
  ElMessage.success('内容已设置')
}

const clearContent = () => {
  content.value = '<p><br></p>'
  ElMessage.success('内容已清空')
}

onBeforeUnmount(() => {
  editorRef.value?.destroy()
})
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.editor-wrapper {
  border: 1px solid #ccc;
  z-index: 100;
}

.editor {
  height: 400px;
}

.content-preview {
  margin-top: 20px;
  padding: 15px;
  background: #f5f5f5;
  border-radius: 4px;
}

.content-preview pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>

工具栏配置

const toolbarConfig = {
  // 排除某些工具
  excludeKeys: ['uploadVideo', 'insertTable'],
  
  // 或只包含某些工具
  keys: [
    'bold', 'italic', 'underline',
    '|', 'color', 'bgColor',
    '|', 'fontSize', 'fontFamily',
    '|', 'justifyLeft', 'justifyCenter', 'justifyRight',
    '|', 'insertImage', 'uploadImage'
  ]
}

菜单配置

const editorConfig = {
  MENU_CONF: {
    // 图片上传配置
    uploadImage: {
      server: '/api/upload/image',
      fieldName: 'file',
      maxFileSize: 5 * 1024 * 1024, // 5MB
      maxNumberOfFiles: 5,
      allowedFileTypes: ['image/*'],
      meta: { token: 'xxx' },
      metaWithUrl: true,
      withCredentials: true,
      timeout: 10 * 1000
    },
    
    // 字体大小
    fontSize: {
      fontSizeList: ['12px', '14px', '16px', '18px', '20px', '24px', '28px', '32px']
    },
    
    // 字体
    fontFamily: {
      fontFamilyList: ['宋体', '黑体', '微软雅黑', 'Arial', 'Times New Roman']
    }
  }
}