使用TinyMCE使用MathJax渲染数学公式

时间:2017-06-08 14:48:34

标签: javascript tinymce-4 mathjax

当我尝试在基于TinyMCE的WYSIWYG编辑器中渲染数学公式时,我遇到了一个问题。

代码

这里是TinyMCE的初始化

$(document).ready(function () {

  $('body').html(`<div id="raje_root">${$('body').html()}</div>`)

  tinymce.init({

    selector: '#raje_root',

    content_css: ['css/bootstrap.min.css', 'css/rash.css', 'css/rajemce.css'],

    plugins: "fullscreen link codesample raje_inlineCode raje_inlineQuote raje_section table image noneditable raje_figure raje_table raje_listing raje_formula preview",

    menubar: false,

    toolbar: 'undo redo bold italic link superscript subscript raje_inlineCode raje_inlineQuote | codesample blockquote raje_table raje_figure raje_listing raje_formula | raje_section preview',

    setup: function (editor) {

    editor.on('init', function (e) {

      editor.execCommand('mceFullScreen')
    })
  })
})

相反,这里是MathJax初始化(配置: TeX-AMS-MML_HTMLorMML)

var ignore_math_class = 'rash-nomath';
var process_math_class = 'rash-math';

var ascii_math_left_delimiter = '``';
var ascii_math_right_delimiter = '``';

var tex_math_left_delimiter = '$$';
var tex_math_right_delimiter = '$$';

MathJax.Hub.Config({

  asciimath2jax: {

    delimiters: [ [ascii_math_left_delimiter, ascii_math_right_delimiter] ],
      processClass: process_math_class,
      ignoreClass: ignore_math_class
    },
    tex2jax: {

      inlineMath: [ [tex_math_left_delimiter, tex_math_right_delimiter] ],
      processClass: process_math_class,
      ignoreClass: ignore_math_class
    }
  }
});

这是 index.html 正文

<body>
<section id="section1">
  <h1>Parent section</h1>
  <figure id="formula_2">
  <p>
    <math xmlns="http://www.w3.org/1998/Math/MathML">
      <mrow>
        <msup>
          <mfenced open="[" close="]">
            <mrow>
              <mi>a</mi>
              <mo>+</mo>
              <mi>b</mi>
            </mrow>
          </mfenced>
          <mn>260</mn>
        </msup>
        <mo>+</mo>
        <msub>
          <mfenced open="{" close="}">
            <mrow>
              <mi>a</mi>
              <mo>+</mo>
              <mi>b</mi>
            </mrow>
          </mfenced>
          <mi>i</mi>
        </msub>
      </mrow>
    </math>
  </p>
</figure>

问题

通常(在TinyMCE之外)它应该呈现如下(标题不重要,只是一个数字来定位文档内的公式) How MathJax formula should be rendered

而不是这种行为,TinyMCE将其转换为段落中的原始文本,如enter image description here

答案

换句话说: TinyMCE会以某种方式阻止MathJax公式呈现

注意:其他输入也会发生这种情况(LaTeX,AsciiMath)

如何配置这些插件以在TinyMCE边界之间呈现公式?

0 个答案:

没有答案