TinyMCE 公式录入实战

引言

整了两个晚上，终于完美地完成了公式录入功能。

此刻已经激动地睡不着觉了，要连夜记下这篇博客分享自己的快乐与研究成果。

插件选择：tinymce-mathjax。

该插件发布于两个月前，属于比较新的，可能知道的人比较少，所以一直在Google上查询没有查询到，很庆幸自己无聊的时候在npm的首页一页一页翻，幸运地找到了这款插件。

同时也发起了这个仓库的第一个star。

功能很简单，以LaTeX语法输入公式，然后使用MathJax进行LaTeX表达式的渲染，所有工作全部在前台执行。

使用

安装

安装插件与mathjax@3.0.0版本。

npm i @dimakorotkov/tinymce-mathjax --save
npm i mathjax@3.0.0 --save

注意一定是3.0.0版本，最新版本为2.7.7，经测试无效，这里的版本号可能是作者录错了。

配置 angular.json

将node_modules目录下的插件与angular应用联系起来，定义assets输入输出。

打开angular.json文件，依次定位到projects -> web -> architect -> build -> options -> assets数组。

配置如下：

"assets": [
  { "glob": "**/*", "input": "node_modules/@dimakorotkov/tinymce-mathjax", "output": "/tinymce/plugins/mathjax/" },
  { "glob": "**/*", "input": "node_modules/mathjax", "output": "/mathjax/" }
]

配置插件

配置plugins：插件、toolbar：工具栏、mathjax/lib：MathJax库目录。

plugins: 'mathjax',
toolbar: 'mathjax',
mathjax: {
  lib: '/mathjax/es5/tex-mml-chtml.js'
}

效果

点击∑符号即弹出公式录入页。

输入一个傅立叶级数的LaTeX表达式。

公式录入成功！

并且当点击公式时，自动进入公式编辑页，比直接存储图片方便得多。

总结

感谢作者dimakorotkov，感谢开源社区，感谢Github！