富文本编辑器TinyMCE&数学公式MathJax - zhouted/zhouted.github.io GitHub Wiki

插件下载

安装部署

  • 解压tinymce_5.2.2.zip,取js下的tinymce文件夹的内容
  • 解压MathJax-3.0.5.zip,取es5下的内容
  • 把tinymce-mathjax命名为mathjax放到tinymce/plugins/下
  • 把zh_CN.js放到tinymce/langs/下

插件使用

<script type="text/javascript" src="/pathto/tinymce/tinymce.min.js"></script>
<div class="tinymce" id="tinymce" name="tinymce"></div>
var options = {
    selector: '#tinymce',
    plugins: "advlist autolink autoresize autosave charmap code emoticons fullscreen hr image link lists media paste tabfocus table visualblocks visualchars wordcount",
    toolbar: "undo redo | formatselect fontsizeselect | bullist numlist | bold italic underline | alignleft aligncenter alignright alignjustify | outdent indent | removeformat | link unlink | uploadimg image media | emoticons charmap mathjax | fullscreen", 
    inline: true,
    images_upload_handler: function (blobInfo, succFun, failFun) {
      //upload blobInfo(image data) to your server, when success then succFun.call(this, imgUrl), when fail failFun.call(this, errMsg);
    },
    external_plugins: {mathjax: '/pathto/tinymce/plugins/mathjax/plugin.min.js'},
    mathjax: {
      lib: '/pathto/mathjax/tex-mml-chtml.js',
      //symbols: {start: '\\(', end: '\\)'}, //optional: mathjax symbols
      //className: "math-tex", //optional: mathjax element class
      //configUrl: '/pathto/tinymce/plugins/mathjax/config.js' //optional: mathjax config js
    },
};
tinymce.init(options).then(function(e){
  //inited: do something you want.
});

显示公式

<script type="text/javascript" src="/pathto/mathjax/tex-mml-chtml.js"></script>

参考资料

⚠️ **GitHub.com Fallback** ⚠️