自己写的一个数学公式插件

公式转化

公式转化成图片文档链接

变量名	含义	可选的值
type	生成的图片格式	png gif svg emf pdf
format	生成的数据类型	image json javascript download
LaTeX	需转换的 LaTeX 公式	任意符合语法的 LaTeX 代码

通常 type 选择 png 或 svg，format 选择 image。

举个例子

https://latex.codecogs.com/png.image?%5Cint_0%5E1%20xe%5E%7B-x%5E2%7Ddx

https://latex.codecogs.com/svg.image?%5Cint_0%5E1%20xe%5E%7B-x%5E2%7Ddx

自己封装的数学公式插片

1. 创建一个数学插件

class MathComponent {
  title = " ";

  tag = "";

  iconSvg = "";
  constructor() {
    // 自定义菜单标题

    this.title = "数学公式";

    // 类型

    this.tag = "button";

    // 自定义菜单图标

    this.iconSvg =
      '<svg t="1754373977140" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5268" width="200" height="200"><path d="M912.384 682.688v192q0 18.56-13.12 31.68-13.12 13.12-31.68 13.12H194.56q-30.4 0-41.6-28.224-11.264-28.224 10.816-49.152L503.168 520.96 144.96 181.888q-22.08-20.864-10.816-49.152 11.264-28.16 41.6-28.16h691.84q18.56 0 31.68 13.056 13.12 13.184 13.12 31.68v200.96h-64v-181.76H224l337.92 319.872q13.952 13.248 13.952 32.512 0 19.264-14.016 32.512l-319.04 302.08h605.568v-172.8h64z" fill="#000000" p-id="5269"></path></svg>';

    // 显示模态框
    this.showModal = true;
    this.modalWidth = 300;
    this.modalHeight = 300;
  }

  // 获取菜单执行时的value,用不到则返回空，字符串或者false

  getValue(editor) {
    console.log(editor);
    return "数学公式按钮";
  }

  // 菜单是否需要激活(如选中加粗文本,"加粗"菜单会激活) 用不到则返回 false

  isActive(editor) {
    return false; // or true
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false

  isDisabled(editor) {
    return false; // or true
  }

  // 点击菜单出发的函数
  exec(editor, value) {}

  getModalPositionNode(editor) {
    return null; // modal 依据选区定位
  }

  // 定义 modal 内部的 DOM Element
  getModalContentElem(editor) {
    const content = document.createElement("div");
    content.innerHTML = `
          <form>
            <div style="display: flex;align-items: center;">
              公式：<input id="mathcomponent" placeholder="请输入公式" style="width: 180px;height: 30px;text-indent: 10px;" />
            </div>
          </form>
        `;
    const button = document.createElement("span");
    button.style.padding = "5px 10px";
    button.style.border = "1px solid #ccc";
    button.style.borderRadius = "5px";
    button.style.cursor = "pointer";
    button.style.marginTop = "20px";
    button.style.marginLeft = "120px";
    button.style.marginBottom = "20px";
    button.style.backgroundColor = "#409eff";
    button.style.color = "#fff";
    button.style.display = "inline-block";
    button.innerHTML = "确定";
    content.appendChild(button);
    button.onclick = () => {
      // @ts-ignore
      const value = content.querySelector("#mathcomponent").value;
      if (!value) return;
      editor.restoreSelection(); // 恢复选区
      const node = {
        type: "image",
        src: `https://latex.codecogs.com/svg.image?${value}`,
        children: [{ text: "" }],
      };
      editor.insertNode(node);
      // editor.insertText(value);
      // editor.insertText(' ');
    };
    return content;
  }
}

export default MathComponent;

2. 在编辑器中注册

const MathMenu = {
  key: "MathMenu",
  factory() {
    return new MathComponent();
  },
};

if (Boot.plugins.length < 13) {
  // 注册
  Boot.registerMenu(MathMenu);
}

const toolbarConfig = {
  // 插入哪些菜单
  insertKeys: {
    index: 22, // 自定义插入的位置
    keys: ["MathMenu", "uploadAttachment"], // “上传附件”菜单
  },
};