vue2使用wangeditor实现手写输入

1.效果

 2.实现

2.1：先看我上一篇，这篇就是在上一篇的基础上添加一个手写功能，导入注册就行了

vue2使用wangeditor实现数学公式+富文本编辑器-CSDN博客

在components中添加myscriptMath.js 

svg也就是个显示的图标，可以替换为其他

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

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    return "";
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false;
  }
  // 点击菜单时触发的函数
  exec(editor, value) {
    // Modal menu ，这个函数不用写，空着即可
  }

  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode(editor) {
    return null; // modal 依据选区定位
  }

  // 定义 modal 内部的 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 = $(`
    

      
    
`);
    const $button = $(
      `
        确认插入
      `
    );
    $content.append($button);

    $button.on("click", () => {
      // 执行插入公式
      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 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能
  }
}
const menuConf = {
  key: "myscriptMath", // menu key ，唯一。注册之后，需通过 toolbarKeys 配置到工具栏
  factory() {
    return new MyScriptMathMenu();
  },
};

export default menuConf;

2.2导入注册实现

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

3.完整代码

文章到此结束，希望对你所有帮助~