vue中使用富文本插件wangeditor
我把文本框封装成了一个组件,方便项目调用。<!-- editor.vue --><template><div><div ref="editor" style="text-align:left"></div><
·
我把文本框封装成了一个组件,方便项目调用。
<!-- editor.vue -->
<template>
<div>
<div ref="editor" style="text-align:left">
</div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name: 'editor',
data () {
return {
editor: null,
}
},
props: {
value: {
default: ""
}
},
mounted() {;
this.editor = new E(this.$refs.editor)
this.editor.customConfig.onchange = (html) => { // 获取内容
this.$emit("input", html);
}
this.editor.create();
this.editor.txt.html(this.value); // 设置内容
}
}
</script>
<style scoped>
</style>
在别的vue文件中引用:
<!-- template -->
<Editor v-model="content"/>
// js
components: {
Editor: resolve => resolve(require('./component/editor/editor.vue'))
},
更多推荐
已为社区贡献1条内容
所有评论(0)