尝试在tinymce6中添加数学公式，网上资料比较少记录一下过程

在tinymce7中可以通过（https://www.tiny.cloud/docs/tinymce/latest/math/）高级插件实现录入数学公式。高级插件需要订阅付费之后才可以使用。

搜索找到了kityformula-editor插件。此方式是通过转为图片的方式来加载数学公式。还有一种方式是通过公式语法存储和展示。此方式未做深入探究。

插件下载

链接: https://pan.baidu.com/s/1056VkPKs3sGX02rxkn2nNA?pwd=diaf 提取码: diaf

使用方式

tinymce使用方式，可以参考之前的文章

下载插件

下载完成之后，放置路径如下。

html文件和js放到public，如果放到一起引用，会被项目编译处理导致报错。也有其他避免编译的方式可自行选择放置方式。

插件的目录结构如下

将目录中的kityformula和kityFormula.html移入public

修改文件

修改插件plugin.js

// 修改html的加载路径
var baseURL = '/kityFormula.html';

引入插件

import './kityformula-editor/plugin'


// 初始化的时候，在插件和工具栏添加kityformula-editor

tinymce.init({
    selector: '#tinydemo',
    plugins: "code kityformula-editor",
    toolbar: "code kityformula-editor",
});

引入完成

到此插件引入成功，可以使用了。其实引入并不难，很多问题是引入之后的报错和各种兼容问题。
本文将插件拆分开也是为了解决编译造成的问题。