cnpm i wangeditor --save
<template>
<div class="son">
<template>
<div ref="editor"></div>
</template>
</div>
</template>
<script>
import WangEditor from 'wangeditor'
export default {
data () {
return {
editor: null,
}
},
props: {
content: {
type: String,
default: ""
}
},
mounted () {
this.editor = new WangEditor(this.$refs.editor)
this.editor.create()
this.editor.txt.html(this.content)
this.editor.customConfig = this.editor.customConfig ? this.editor.customConfig : this.editor.config;
this.editor.customConfig.onchange = html => {
this.$emit('update:content', html)
}
},
}
</script>
<style lang='less' scoped>
/deep/ .w-e-toolbar {
display: none;
}
/deep/ .w-e-text {
border-top: 1px solid #000;
}
</style>
<template>
<div class="home">
{{ fuContent }}
<Son :content="fuContent" @update:content="fuContent=$event" />
</div>
</template>
<script>
import Son from './Son.vue'
export default {
data () {
return {
fuContent: "<p><i><b>你好,我是初始值大叔大婶</b></i></p>",
};
},
components: {
Son,
},
};
</script>
<style lang="less" scoped>
</style>