vue-ueditor-wrap

Chatroom Version Downloads Commit Issues License

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,例如Issue1Issue8,且官方不再积极维护。为了世界的和平,针对一些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.htmlmain.js里引入UEditor的各种js文件。更重要的是即使你在一个页面里同时使用多个vue-ueditor-wrap组件,它所依赖的js文件也只会加载一次。这么做的原因在于你不需要当用户一打开项目就先加载大量UEditor相关的资源,所有的资源文件只会在vue-ueditor-wrap组件第一次被激活时才加载。当然如果你在index.htmlmain.js里引入了相关资源、vue-ueditor-wrap也会准确判断,你不用担心它会重复加载资源。

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

Issues

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

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

    支持IE9

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

    image

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

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

    image

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

    image

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

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

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

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

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

Logo

前往低代码交流专区

更多推荐