<template>
  <div class="page" 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"
    />
  </div>
</template><script>
import Vue from "vue";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";

export default Vue.extend({
  props: ["value", "subPath"],
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p><br></p>",
      toolbarConfig: {
        excludeKeys: [
          "insertLink",
          "todo",
          "fullScreen",
          "fontFamily",
          "lineHeight",
          "insertTable",
          "codeBlock"
        ]
      },
      editorConfig: {
        placeholder: "请输入内容...",
        // autoFocus: false,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          uploadImage: {
            fieldName: "file",
            server:
              "https://api.k.wxpai.cn/bizproxy/tianbaoServiceApi/" +
              app.api.upload,
            meta: {
              subPath: this.subPath
            },
            customInsert(res, insertFn) {
              console.log(res);
              // res 即服务端的返回结果

              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(res.content, "", "");
            }
          },

          uploadVideo: {
            fieldName: "file",
            server:
              "https://api.k.wxpai.cn/bizproxy/tianbaoServiceApi/" +
              app.api.upload,
            meta: {
              subPath: this.subPath
            },
            customInsert(res, insertFn) {
              console.log(res);
              // res 即服务端的返回结果

              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(res.content, "", "");
            }
          }
        }
      },
      mode: "default" // or 'simple'
    };
  },
  watch: {
    html(newVal, oldVal) {
      this.$emit("input", newVal);
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 一定要用 Object.seal() ，否则会报错
    },
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
      editor.on("modalOrPanelShow", modalOrPanel => {});
      // 可监听 `modalOrPanelShow` 和 `modalOrPanelHide` 自定义事件来设置样式、蒙层
      // this.editor.on("modalOrPanelShow", modalOrPanel => {
      //   modalOrPanel.isShow = false;
      //   // modalOrPanel.$elem[0].style.display = "none";
      //   // if (modalOrPanel.type !== "modal") return;
      //   // const { $elem } = modalOrPanel; // modal element

      //   // 设置 modal 样式（定位、z-index）
      //   // 显示蒙层
      // });
      this.editor.on("modalOrPanelHide", () => {
        // 隐藏蒙层
      });
    },
    onOk() {
      this.editor.restoreSelection();
      SlateTransforms.setNodes(
        this.editor,
        { alt: this.alt, href: this.href },
        { match: n => SlateElement.isElement(n) }
      );
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 时获取编辑器最新内容
      // console.log(this.editor.getFragment());
    }
  },
  mounted() {
    setTimeout(() => {
      this.html = this.value;
    }, 500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  }
});
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss" scoped>
</style>