vue-ueditor-wrap

会当凌绝顶，一览众山小。 —— 杜 甫《望岳》

https://github.com/haochuan9421/vue-ueditor-wrap

vue-ueditor-wrap：轻松集成 UEditor 到 Vue 项目

在 Web 开发中，富文本编辑器是许多应用的重要组成部分，尤其是在博客系统、内容管理平台（CMS）等场景中。作为经典的富文本编辑器，UEditor 功能强大，但在现代前端框架（如 Vue）中使用时可能略显复杂。

今天我们来介绍 vue-ueditor-wrap，一个基于 Vue 的封装组件，旨在让开发者轻松将 UEditor 集成到 Vue 项目中。

---

什么是 vue-ueditor-wrap？

vue-ueditor-wrap 是一个 UEditor 的 Vue 封装组件，提供了简洁的 API 和灵活的配置选项。它解决了原生 UEditor 在 Vue 项目中的集成难题，让开发者无需处理复杂的初始化逻辑。

---

主要功能

1. 快速集成：通过简单的配置，即可将 UEditor 嵌入 Vue 项目。
2. 支持双向绑定：轻松实现 Vue 的 v-model 与 UEditor 内容的同步。
3. 动态配置：支持通过属性传递 UEditor 的各种配置。
4. 事件监听：支持监听编辑器的多种事件，方便实现自定义行为。
5. 简洁的 API：封装了常用的 UEditor 方法，简化调用逻辑。

---

快速上手指南

以下是使用 vue-ueditor-wrap 的基本步骤：

1. 安装依赖

在项目中安装 vue-ueditor-wrap：

npm install vue-ueditor-wrap --save

此外，你需要确保项目中已经引入了 UEditor 的相关静态资源文件。可以从 UEditor 官方仓库 下载静态文件，或者使用 CDN。

将静态文件放置在项目的 public 目录下，目录结构示例：

public/
├── ueditor/
│   ├── ueditor.config.js
│   ├── ueditor.all.js
│   ├── lang/
│   ├── themes/

---

2. 在 Vue 项目中使用

(1) 全局注册组件

在 main.js 中全局注册 vue-ueditor-wrap：

import { createApp } from 'vue'
import App from './App.vue'
import VueUeditorWrap from 'vue-ueditor-wrap'

const app = createApp(App)
app.component('VueUeditorWrap', VueUeditorWrap)
app.mount('#app')

(2) 在组件中使用

在需要使用富文本编辑器的组件中添加 VueUeditorWrap：

<template>
  <div>
    <VueUeditorWrap
      v-model="content"
      :config="editorConfig"
      @ready="onEditorReady"
      @blur="onEditorBlur"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '<p>这里是初始内容</p>',
      editorConfig: {
        initialFrameHeight: 300,
        initialFrameWidth: '100%',
        serverUrl: '/ueditor/controller' // 后端接口地址
      }
    }
  },
  methods: {
    onEditorReady() {
      console.log('UEditor 初始化完成')
    },
    onEditorBlur() {
      console.log('UEditor 失去焦点')
    }
  }
}
</script>

---

3. 配置选项

常用配置项

• v-model：双向绑定编辑器的内容。
• config：传递 UEditor 的配置对象，例如高度、宽度、语言等。
• @ready：监听编辑器初始化完成事件。
• @blur：监听编辑器失去焦点事件。
• @focus：监听编辑器获得焦点事件。

示例配置项

editorConfig: {
  initialFrameHeight: 300, // 编辑器高度
  initialFrameWidth: '100%', // 编辑器宽度
  lang: 'zh-cn', // 语言
  theme: 'default', // 主题
  enableAutoSave: false // 禁用自动保存
}

---

进阶功能

1. 调用 UEditor 的方法

vue-ueditor-wrap 暴露了一些常用的编辑器方法，例如获取内容、设置内容等。可以通过 ref 调用这些方法：

<template>
  <div>
    <VueUeditorWrap ref="editorRef" v-model="content" :config="editorConfig" />
    <button @click="getEditorContent">获取内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      editorConfig: { initialFrameHeight: 300 }
    }
  },
  methods: {
    getEditorContent() {
      const content = this.$refs.editorRef.getContent()
      console.log('编辑器内容：', content)
    }
  }
}
</script>

2. 自定义工具栏

通过 config 属性可以自定义工具栏按钮：

editorConfig: {
  toolbars: [
    ['bold', 'italic', 'underline', 'forecolor', 'backcolor', 'insertimage']
  ]
}

3. 动态更新内容

在某些场景中，可能需要动态更新编辑器内容，可以直接修改 v-model 绑定的变量：

this.content = '<p>新的内容</p>'

---

实际应用场景

1. 博客系统：在文章发布页面中集成富文本编辑器，支持用户撰写和格式化内容。
2. 内容管理系统（CMS）：用于编辑和管理页面内容。
3. 评论系统：为用户提供便捷的富文本输入功能。

---

总结

vue-ueditor-wrap 是一个强大且易用的 Vue 富文本编辑器组件，解决了 UEditor 在现代前端框架中的集成问题。无论是博客系统、CMS，还是评论系统，vue-ueditor-wrap 都能为你提供高效的解决方案。

项目地址：https://github.com/haochuan9421/vue-ueditor-wrap

如果你正在寻找一款适配 Vue 的富文本编辑器，不妨试试 vue-ueditor-wrap 吧！欢迎为项目点亮 ⭐️！