<!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>