<template>
  <div style="border: 1px solid #ccc">
    <Toolbar
      style="border-bottom: 1px solid #ccc"
      :editor="editor"
      :defaultConfig="toolbarConfig"
      :mode="mode"
    />

    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="html"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="changeEdit"
    />
  </div>
</template>
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { getToken } from "@/utils/auth";
const config = {
  customInsert: (res, insertFn) => {
    console.log(res);
    insertFn(res.data);
  },
  // base64LimitSize: 500 * 1024, // 5kb
  server: "https://tx.hz-hanghui.com:8088/yx-fyzd/upload/pictureLocal",
  fieldName: "file",
  headers: {
    Authorization: getToken(),
  },
};
export default {
  props: {
    aaa: {
      type: String, // 指定类型
      default: "", // 设置默认值
    },
  },
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "",
      toolbarConfig: {},
      editorConfig: {
        placeholder: "请输入内容...",
        autoFocus: false,
        MENU_CONF: {
          uploadImage: config,
          uploadVideo: config,
        },
      },
      mode: "default", // or 'simple'
    };
  },
  created() {
    // this.html = this.aaa;
    // console.log(this.html);
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
      this.$nextTick(() => {
        this.html = this.aaa;
      });
    },
    changeEdit(editor) {
      // this.html = this.aaa;
      // console.log(editor);
      console.log(this.aaa);
      console.log(this.html);
      const data = {
        html: editor.getHtml(),
        text: editor.getText(),
      };

      // onChange 时获取编辑器最新内容
      this.$emit("change", data);
      // this.$emit("change", this.html);
      // this.$emit("change", editor.children);
    },
  },
  mounted() {
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
