当我尝试在基于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之外)它应该呈现如下(标题不重要,只是一个数字来定位文档内的公式)
而不是这种行为,TinyMCE将其转换为段落中的原始文本,如
答案
换句话说: TinyMCE会以某种方式阻止MathJax公式呈现。
注意:其他输入也会发生这种情况(LaTeX,AsciiMath)
如何配置这些插件以在TinyMCE边界之间呈现公式?