vue-ueditor-wrap

     

Vue + UEditor + v-model双向绑定。之所以有这个repo的原因是:
 1、UEditor依然是国内使用频率极高的所见即所得编辑器而Vue又有着广泛的使用，所以将两者结合使用，是很多Vue项目开发者的切实需求。
 2、目前没有发现满足这种需求，而使用又很方便的repo、有的可能也只是简单的暴露一个UEditor的实例，仍然需要开发者手动去调用getContent,setContent,而通过v-model绑定数据也是很多人期待的方式。于是自己在写公司项目时就手动撸了一个，周末整理一下分享出来，希望能帮助到有同样需求的小伙伴。

点击预览 加入聊天室

Installation

$ npm i vue-ueditor-wrap

Quick Start(基于vue-cli 2.x,完整DEMO)

1. 下载官方资源文件

   下载最新编译的资源文件 官网下载的版本是1.4.3.3,存在诸多BUG,例如Issue1和Issue8,且官方不再积极维护。为了世界的和平,针对一些BUG,我进行了修复，并把编译好的文件放在了本仓库的dist目录下，你可以放心下载,当然你也可以自己clone官方源码并编译

   

   将dist目录下的UEditor资源文件解压并重命名为UEditor(只需要选择一个你需要的版本,比如utf8-php),放入你项目的static目录下

   

   如果你使用的是 vue-cli 3.x, 把UEditor资源文件解压并重命名为UEditor,然后放入你项目的public目录下, 并在第五步添加配置 UEDITOR_HOME_URL: './UEditor/'

2. 引入VueUeditorWrap组件

   import VueUeditorWrap from 'vue-ueditor-wrap'

3. 注册组件

   components: {
       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 :config="myConfig"></vue-ueditor-wrap>

   data () {
       return {
           myConfig: {
               // 如果需要上传功能,找后端小伙伴要服务器接口地址
               // serverUrl: 'http://api.demo.com/ueditor/upload',
               // 你的UEditor资源存放的路径,相对于打包后的index.html
               UEDITOR_HOME_URL: './static/UEditor/',
               // 编辑器不自动被内容撑高
               autoHeightEnabled: false,
               // 初始容器高度
               initialFrameHeight: 240,
               // 初始容器宽度
               initialFrameWidth: '100%',
               // 关闭自动保存
               enableAutoSave: false
           }
       }
   }

6. 获取UEditor实例

   <vue-ueditor-wrap @ready="ready"></vue-ueditor-wrap>

   methods: {
       ready(editorInstance) {
           console.log(`编辑器实例${editorInstance.key}: `,editorInstance)
       }
   }

7. 设置是否在组件的beforeDestroy钩子里销毁UEditor实例

   <vue-ueditor-wrap :destroy="true"></vue-ueditor-wrap>

8. 通过传入 init 参数来对 window.UE 进行二次开发，如添加自定义按钮等。init 函数将在 scripts 加载完毕、editor 初始化之前运行。

   <vue-ueditor-wrap :init="myInit"></vue-ueditor-wrap>

   methods: {
       myInit() {
           window.UE.registerUI(/* ... */)
       }
   }

9. 结合 init 参数以及本组件提供的 registerButton 方法，方便地添加自定义按钮：

   <template>
       <vue-ueditor-wrap ref="ueditor" v-model="html" :init="myInit"></vue-ueditor-wrap>
   </template>
   
   <script>
   export default {
       ...
       methods: {
           myInit() {
               this.$refs.ueditor.registerButton({
                   name: 'test',
                   icon: '/static/test-button.png',
                   tip: 'this is a test tip',
                   handler: (editor, name) => {
                           editor.execCommand('inserthtml', `<span>text inserted by test button</span>`)
                   }
               })
           }
       }
   }
   </script>

   参数： name 按钮名称；icon 按钮图标；tip 按钮 hover 时显示的简介；handler 以 editor 和 name 为入参的按钮动作函数。

Features

1. v-model双向数据绑定!简单、易用。像绑定input框一样绑定vue-ueditor-wrap组件即可，你的代码里将没有实例化，没有getContent,setContent。

2. 完全遵从官方API。所有的配置参数和实例方法与官方完全一致，通过给vue-ueditor-wrap组件的config属性传递一个对象，你就可以得到一个完全独立配置的UEditor编辑器。

3. 自动添加依赖文件。你不需要自己在index.html或main.js里引入UEditor的各种js文件。更重要的是即使你在一个页面里同时使用多个vue-ueditor-wrap组件，它所依赖的js文件也只会加载一次。这么做的原因在于你不需要当用户一打开项目就先加载大量UEditor相关的资源,所有的资源文件只会在vue-ueditor-wrap组件第一次被激活时才加载。当然如果你在index.html或main.js里引入了相关资源、vue-ueditor-wrap也会准确判断，你不用担心它会重复加载资源。

4. 每个vue-ueditor-wrap组件是完全独立的。你甚至可以在上面使用v-for一次渲染99个兔斯基(不要忘记添加key值)。

Issues

1. 是否支持IE等低版本浏览器？

   因为使用了Promise,事件对象Event等,所以请自行babel,后续也许会加

   支持IE9

   

2. 为什么我会看到这个?

   

   这是因为你的UEDITOR_HOME_URL路径填写错误,请参考步骤5

3. 为什么我会看到后台配置项返回格式出错？我如何上传图片和文件？

   

   UEditor的上传图片、文件等是需要与后台配合的功能，而你没有在config中设置正确的serverUrl,UEditor默认的地址是根据你下载版本生成的，去找你的后端小伙伴要吧

   

4. 为什么我输入"? ! $ #" 这些特殊字符，没有绑定上去？

   那时因为v-model的实现基于UEditor实例上contentChange事件的监听，由于你输入这些特殊字符时通常是按住shift键的，UEditor本身的contentChange在shift键按住时不会触发，你也可以尝试同时按下多个键，你会发现contentChange只触发一次。所有我也很无奈呀！请移步UEditor

5. 单图片上传后v-model绑定的是loading小图标,我最新编辑的版本,修复了官方的这个BUG,如果你使用的是官网的资源文件,请替换资源文件或参见Issue1)

更多Issues,由于个人能力有限，如果小伙伴们有好的建议或更炫酷的操作，欢迎PR,如果你觉得这个组件给你的开发带来了实实在在的方便，也非常感谢你的Star和关注

PR之前请先执行npm run lint进行代码风格检测,大部分语法细节可以通过npm run fix修正,记得修改package.json的版本号version