vue当中，怎么把内容加载到wangeditor编辑框中，编辑框为组件。

Question

打开页面里，能得到内容里的东西，就是不知道怎么把内容放到这个编辑框当中

Answer 1

插入 HTML的方法： editor.cmd.do('insertHTML', '<p>...</p>')

Answer 2

wangEditor 贴下关于编辑器的代码

Answer 3

<div v-html="content" @input="result" id="editor">
  </div>
//js里接收参数
  props: ['content']

//调用组件
<v-editor :content="editorContent" v-model="article.content"></v-editor>
this.editorContent = data.content;

Answer 4

封装组件

<template>
  <div>
    <div
      ref="editor"
      style="text-align:left"
    ></div>
  </div>
</template>

<script>
import WangEditor from "wangeditor";
export default {
  name: "editor",
  model: {
    prop: "editorContent",
    event: "change"
  },
  props: {
    editorContent: { required: true }
  },
  mounted() {
    /*实例化*/
    var editor = new WangEditor(this.$refs.editor);
    /*设置上传图片*/
    editor.customConfig.uploadImgServer = "/upload/image/";
    editor.customConfig.uploadFileName = "fileToUpload";
    editor.customConfig.uploadImgHooks = {
      customInsert: function(insertImg, result, editor) {
        var url = result.data;
        insertImg(url);
      }
    };
    /*绑定回馈事件*/
    editor.customConfig.onchange = html => {
      this.$emit("change", html);
    };
    /*创建编辑器*/
    editor.create();
    /*初始内容*/
    editor.txt.html(this.editorContent);
  }
};
</script>

使用组件

<editor v-model="xxxx"/>