在vue中使用wangEditor富文本编辑框

npm安装

npm i wangeditor --save

创建wangEditor.vue

<template>
  <div class="home">
    <div id="demo1"></div>
  </div>
</template>
<script>
// 引入 wangEditor
import WangEditor from 'wangeditor'
export default {
  props: ['content'],
  data () {
    return {
      editor: null,
      editorData: ''
    }
  },
  mounted () {
    const editor = new WangEditor('#demo1')
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml
      this.$emit('change', {val: this.editorData})
    }
    // 创建编辑器
    editor.create()
    // 初始化
    editor.txt.html(this.content)
    this.editor = editor
  },
  methods: {
    getEditorData () {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html()
      alert(data)
    }
  },
  beforeDestroy () {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  }
}
</script>
<style>
  .home {
    width: 40vw;
    margin: auto;
    position: relative;
  }
</style>

父组建调用

<template>
	<div>
		<editor-bar :content="this.content" @change="change"></editor-bar>
	</div>
</template>
<script>
import EditorBar from '@/components/wangEditor.vue'
export default {
	components: { EditorBar },
	data () {
    	return {
      		content: ''
    	}
   },
   created () {
	    this.content = this.e.rows.content
	},
	methods: {
		change (val) {
	      this.content = val.val
	    }
    }
}
</script>