vue.js ueditor demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>

    <div class='container' id="demo">
        <textarea v-model="content"></textarea>
        <div id="editor" v-ueditor="content" :config="config"></div>
    </div>

    <script src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/ueditor.config.js"></script>
    <script src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/ueditor.all.js"></script>
    <script src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/lang/zh-cn/zh-cn.js"></script>
    <script src="http://cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>

    <script type="text/javascript">
        //http://vuejs.org.cn/guide/custom-directive.html
        Vue.directive('ueditor', {
            params: ['config'],
            twoWay: true,
            bind: function () {
                var self = this;
                this.el.id = 'ueditor' + new Date().getTime().toString()
                this.editor = UE.getEditor(this.el.id, this.params.config)
                this.editor.ready(function () {
                    self.editorReady = true
                    self.editor.addListener("contentChange", function () {
                        self.set(self.editor.getContent())
                    })
                    self.update(self.vm.$get(self.expression))
                })
            },
            update: function (newValue, oldValue) {
                if (this.editorReady) {
                    this.editor.setContent(newValue)
                }
            },
            unbind: function () {
                this.editor.destroy()
            }
        })

        var vm = new Vue({
            el: '#demo',
            data: function () {
                return {
                    content: 'Hello Vue.js!',
                    config: {
                        toolbars: [
                            ['fullscreen', 'source', 'undo', 'redo', 'bold']
                        ]
                    }
                }
            }
        })
    </script>
</body>
</html>

1.0

<template>
    <div v-el:editor></div>
</template>

<script>
    //<ueditor :value.sync="str" :config="config"></ueditor>
    module.exports = {
        props: {
            value: {
                type: String,
                default: null
            },
            config: {
                type: Object,
                default: {}
            }
        },
        ready() {
            let id = new Date().getTime().toString()

            this.$els.editor.id = id
            this.editor = UE.getEditor(id, this.config)

            this.editor.ready(function () {
                this.editor.setContent(this.value)

                this.editor.addListener("contentChange", function () {
                    let s = this.editor.getContent()
                    this.$set('value', s)
                }.bind(this))

                this.$emit('ready', this.editor)
            }.bind(this))
        }
    }
</script>

2.0

<template>
    <div ref="editor"></div>
</template>

<script>
    let guidGenerator = require('src/utils/guidGenerator')

    //<ueditor v-model="str" :config="config"></ueditor>
    module.exports = {
        props: {
            value: {
                type: String,
                default: null
            },
            config: {
                type: Object,
                default: {}
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                // 保证 this.$el 已经插入文档
                let id = guidGenerator()

                this.$refs.editor.id = id
                this.editor = UE.getEditor(id, this.config)

                this.editor.ready(function () {
                    this.editor.setContent(this.value)

                    this.editor.addListener("contentChange", function () {
                        this.$emit('input', this.editor.getContent())
                    }.bind(this))

                    this.$emit('ready', this.editor)
                }.bind(this))
            })
        }
    }
</script>

vue.js ueditor demo

Chobits

引用和评论

linux上更新nginx证书

开发插件集合

Vue.js-方法与事件

Vue 项目推荐使用这个图标库 vue-icons-plus

从零开始搭建 Vue3 组件库开发环境

electron开发采坑小记

这个前端神器，竟让滴滴、美团都爱不释手？！