Vue使用富文本编辑器（wangEditor）

1. 配置

npm 安装

npm i wangeditor --save

2. 示例

<template>
  <div class="ArticleDetail">
    <div ref="editor" style="text-align:left"></div>
    <div class="padding-top-xs text-right">
      <button class="ui-btn bg-blue" @click="editorSubmit">发布</button>
    </div>
  </div>
</template>

<script>
  import E from 'wangeditor'
  var editor;
  var that;
  export default {
    name: "WriteArticle",
    data: function() {
      return {
        content: ''
      }
    },
    mounted: function() {
      that = this;
      editor = new E(that.$refs.editor);
      editor.config.onchange = function(html) {
        that.content=html;
        console.log('change 之后最新的 html', html)
      }
      editor.create()
    },
    methods: {
      editorSubmit() {
        console.log(that.content)
      }
    }
  }
</script>

wangEditor官方文档