Vue项目中最简单的使用集成UEditor方式，含图片上传

Vue 3 项目参考这里

前言

封面是UEditor的 百度指数 折线图。虽然今天已经是 2018 年，且优秀的富文本编辑器层出不穷（包括移动端），但从图中可以看出UEditor仍然维持着较高的搜索热度。而不少公司和个人也仍然在项目中使用UEditor。目前，UEditor官网的最后一次版本更新是 1.4.3.3，这已经是 2016 年的事情了，而今天的前端开发，很多小伙伴都在使用Vue，React 这种组件化的前端框架。这就导致在这些“现代”框架中集成UEditor变得很不平滑。所以才会有下图这些大量介绍如何在Vue项目中集成UEditor的博客：

为了提高代码的可复用性，也为了尽可能的不在业务代码中参杂UEditor的相关操作，我在几个月前，公司项目的开发中撸了一个组件，可以通过v-model双向绑定的方式来使用UEditor，简单到就像使用input框一样。当我撸完，感觉非常的Vue范儿。而且看了不少博客和GitHub项目，都没有类似的实现。于是我决定发布到 npm 上，帮助一众还在思考如何把UEditor集成到Vue项目中的小伙伴。几个月下来，基本已经稳定，所以，今天通过这篇博客，分享给大家。

先看效果图：

点击预览 仓库地址

Installation

npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap

安装太慢？试试 URM

Quick Start

基于 vue-cli 2.x 的完整 DEMO
基于 Nuxt 的服务端渲染 DEMO。

1. 下载 UEditor

   下载最新编译的 UEditor。官网目前最新的版本是1.4.3.3，存在一些 BUG，且官方不再积极维护。针对一些常见 BUG，我进行了修复，你可以放心下载，当然你也可以自己 clone 官方源码并编译。

   

   将下载的压缩包解压并重命名为 UEditor（只需要选择一个你需要的版本,比如 utf8-php）,放入你项目的 static 目录下。

   

   如果你使用的是 vue-cli 3.x，可以把 UEditor 文件夹放入项目的 public 目录下。

2. 引入VueUeditorWrap组件

   import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
   // 或者
   const VueUeditorWrap = require('vue-ueditor-wrap') // CommonJS
   

   你也可以通过直接引入 CDN 链接的方式来使用，它会暴露一个全局的 VueUeditorWrap 变量（具体如何使用你可以阅读我的这篇博客或参考这个仓库）。

   <script src="https://cdn.jsdelivr.net/npm/vue-ueditor-wrap@latest/lib/vue-ueditor-wrap.min.js"></script>
   

3. 注册组件

   components: {
        
     VueUeditorWrap
   }
   // 或者在 main.js 里将它注册为全局组件
   Vue.component('vue-ueditor-wrap', VueUeditorWrap)
   

4. v-model绑定数据

   <vue-ueditor-wrap v-model="msg"></vue-ueditor-wrap>
   

   data () {
        
     return {
        
       msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>'
     }
   }
   

   至此你已经可以在页面中看到一个初始化之后的 UEditor 了，并且它已经成功和数据绑定了！???

5. 根据项目需求修改配置，完整配置选项查看 ueditor.config.js 源码或 官方文档

   <vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>
   

   data () {
        
     return {
        
       msg: '<h2><img src="http://img.baidu.com/hi/jx2/j_0003.gif"/>Vue + UEditor + v-model双向绑定</h2>',
       myConfig: {
        
         // 编辑器不自动被内容撑高
         autoHeightEnabled: false,
         // 初始容器高度
         initialFrameHeight: