博客

最近在做一个数学题库系统，想到普通的编辑器只能上传公式的图片，需要修改时还得重新上传。所以，在网上参考了些方法，自己在后台加了个在线的数学公式录入编辑LaTeX转换的编辑器，方便使用。

公式参考:

https://blog.csdn.net/weixin_42373330/article/details/89785443

参考资料：

https://www.cnblogs.com/already/p/12876452.html

框架：thinkphp6.0

编辑器：tinymce_5.7.0

插件：tinymce-mathjax

依赖组件：mathjax-3.1.4

网上的资料挺少的，自己摸索了下配置：

1、下载编辑器

http://tinymce.ax-z.cn/

，放置到项目目录中，

2、安装插件：把【插件包】mathjax 下的mathjax 目录文件  添加到 tinymce\plugins 编辑器目录下

3、配置编辑器 : 下面附上代码，依赖路径根据自己的目录位置而改

<div class="layui-input-inline">
      <textarea id="mytextarea"  name="text"></textarea>
</div>


<script>

  tinymce.init({
      selector: '#mytextarea',
      language:'zh_CN',
      external_plugins: {'mathjax': 'plugins/mathjax/plugin.min.js'},  //引用插件
      mathjax: {
          lib: '__STATIC__/mathjax-3.1.4/package/es5/tex-mml-chtml.js'   //引用依赖
      },
      plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave bdmap indent2em autoresize formatpainter axupimgs',
      toolbar: 'mathjax | code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',
      height: 650, //编辑器高度
      min_height: 400,
    
      fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
      font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
      link_list: [
          { title: '预置链接1', value: 'http://www.tinymce.com' },
          { title: '预置链接2', value: 'http://tinymce.ax-z.cn' }
      ],
      image_list: [
          { title: '预置图片1', value: 'https://www.tiny.cloud/images/glyph-tinymce@2x.png' },
          { title: '预置图片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
      ],
      image_class_list: [
          { title: 'None', value: '' },
          { title: 'Some class', value: 'class-name' }
      ],
      importcss_append: true,
      //自定义文件选择器的回调内容
      file_picker_callback: function (callback, value, meta) {
          if (meta.filetype === 'file') {
              callback('https://www.baidu.com/img/bd_logo1.png', { text: 'My text' });
          }
          if (meta.filetype === 'image') {
              callback('https://www.baidu.com/img/bd_logo1.png', { alt: 'My alt text' });
          }
          if (meta.filetype === 'media') {
              callback('movie.mp4', { source2: 'alt.ogg', poster: 'https://www.baidu.com/img/bd_logo1.png' });
          }
      },
      toolbar_sticky: true,
      autosave_ask_before_unload: false,
  });

</script>

5、下载地址（编辑器、插件、组件）：

https://download.csdn.net/download/u014538997/18295952

6、效果截图：