import $ from "jquery";
import { mathIcon } from "../assets/icons/svg-icon.ts";
 
class MyScriptMathMenu {
  constructor() {
    this.title = "手寫公式";
    this.iconSvg = mathIcon;
    this.tag = "button";
    this.showModal = true;
    this.modalWidth = 900;
    this.modalHeight = 500;
  }
 
  // 菜單是否需要激活（如選中加粗文本，“加粗”菜單會激活），用不到則返回 false
  isActive(editor) {
    return false;
  }
 
  // 獲取菜單執(zhí)行時(shí)的 value ，用不到則返回空 字符串或 false
  getValue(editor) {
    return "";
  }
 
  // 菜單是否需要禁用（如選中 H1 ，“引用”菜單被禁用），用不到則返回 false
  isDisabled(editor) {
    return false;
  }
  // 點(diǎn)擊菜單時(shí)觸發(fā)的函數(shù)
  exec(editor, value) {
    // Modal menu ，這個(gè)函數(shù)不用寫，空著即可
  }
 
  // 彈出框 modal 的定位：1. 返回某一個(gè) SlateNode； 2. 返回 null （根據(jù)當(dāng)前選區(qū)自動定位）
  getModalPositionNode(editor) {
    return null; // modal 依據(jù)選區(qū)定位
  }
 
  // 定義 modal 內(nèi)部的 DOM Element
  getModalContentElem(editor) {
    // panel 中需要用到的id
    const inputIFrameId = "kityformula_" + Math.ceil(Math.random() * 10);
    const btnOkId = "kityformula-btn" + Math.ceil(Math.random() * 10);
 
    const $content = $(`
    <div>
      <iframe id="${inputIFrameId}" class="iframe" height="400px" width="100%" frameborder="0" scrolling="no" src="/myscriptMath/index.html"></iframe>
    </div>`);
    const $button = $(
      `<button id="${btnOkId}" class="right" style='margin: 5px 0'>
        確認(rèn)插入
      </button>`
    );
    $content.append($button);
 
    $button.on("click", () => {
      // 執(zhí)行插入公式
      const node = document.getElementById(inputIFrameId);
      const latex = node.contentWindow.latex;
 
      const formulaNode = {
        type: "paragraph",
        children: [
          {
            type: "formula",
            value: latex,
            children: [
              {
                text: "",
              },
            ],
          },
        ],
      };
      editor.insertNode(formulaNode);
      editor.hidePanelOrModal();
    });
 
    return $content[0]; // 返回 DOM Element 類型
 
    // PS：也可以把 $content 緩存下來，這樣不用每次重復(fù)創(chuàng)建、重復(fù)綁定事件，優(yōu)化性能
  }
}
const menuConf = {
  key: "myscriptMath", // menu key ，唯一。注冊之后，需通過 toolbarKeys 配置到工具欄
  factory() {
    return new MyScriptMathMenu();
  },
};
 
export default menuConf;

import myscriptMath from "@/components/myscriptMath";
import { Boot } from "@wangeditor/editor";
      toolbarConfig: {
        // 插入編輯公式菜單
        insertKeys: {
          index: 0,
          keys: [
            "kityFormula", // “編輯公式”菜單
            "myscriptMath",
          ],
        },
        // excludeKeys: [ /* 隱藏哪些菜單 */ ],
      },
  created() {
    Boot.registerMenu(myscriptMath);
  },

<template>
  <div class="content-box">
    <div class="container" style="width: 1000px; margin: 0 auto">
      <div>
        <button @click="printEditorHtml">獲取編輯器html</button>
        <button @click="getEditorText">獲取編輯器文本</button>
      </div>
      <div style="border: 1px solid #ccc; margin-top: 10px; text-align: left">
        <!-- 工具欄 -->
        <Toolbar
          style="border-bottom: 1px solid #ccc"
          :editor="editor"
          :defaultConfig="toolbarConfig"
        />
        <!-- 編輯器 -->
        <Editor
          style="height: 500px; overflow-y: hidden"
          :defaultConfig="editorConfig"
          v-model="html"
          @onChange="onChange"
          @onCreated="onCreated"
          @onFocus="handleFocus"
        />
      </div>
      <div style="margin-top: 10px">
        <textarea
          v-model="html"
          readonly
          style="width: 100%; height: 200px; outline: none"
        ></textarea>
      </div>
    </div>
  </div>
</template>
 
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import kityformula from "@/components/kityformula";
import myscriptMath from "@/components/myscriptMath";
import { Boot } from "@wangeditor/editor";
import formulaModule from "@wangeditor/plugin-formula";
export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  data() {
    return {
      editor: null,
      html: "<p>hello&nbsp;world</p>",
      toolbarConfig: {
        // 插入編輯公式菜單
        insertKeys: {
          index: 0,
          keys: [
            "kityFormula", // “編輯公式”菜單
            "myscriptMath",
          ],
        },
        // excludeKeys: [ /* 隱藏哪些菜單 */ ],
      },
      editorConfig: {
        placeholder: "請輸入內(nèi)容...",
        // autoFocus: false,
 
        // 所有的菜單配置，都要在 MENU_CONF 屬性下
        MENU_CONF: {},
      },
    };
  },
  methods: {
    onCreated(editor) {
      console.log("created", editor);
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否則會報(bào)錯(cuò)
    },
    onChange(editor) {
      console.log("onChange", editor.getHtml()); // onChange 時(shí)獲取編輯器最新內(nèi)容
    },
    handleFocus(editor) {
      console.log("focus", editor);
    },
    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;
 
      console.log(editor.getText()); // 執(zhí)行 editor API
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;
 
      console.log(editor.getHtml()); // 執(zhí)行 editor API
    },
  },
  created() {
    Boot.registerMenu(kityformula);
    Boot.registerMenu(myscriptMath);
    Boot.registerModule(formulaModule);
  },
  mounted() {
    // 模擬 ajax 請求，異步渲染編輯器
    setTimeout(() => {
      this.html = "<p>Ajax 異步設(shè)置內(nèi)容 HTML</p>";
    }, 1500);
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 組件銷毀時(shí)，及時(shí)銷毀 editor ，重要！?。?
  },
};
</script>
 
<style src="@wangeditor/editor/dist/css/style.css"></style>