Vue, how to load the content into the wangeditor edit box, the edit box as a component.

clipboard.png

Open the page and get what"s in the content, but I don"t know how to put the content in this edit box

Mar.23,2021

method for inserting HTML: editor.cmd.do ('insertHTML','

.

')


wangEditor paste the code about the editor


<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;

encapsulate components

<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>

use components

<editor v-model="xxxx"/>
Menu