如何在StackEditor中集成LaTeX数学公式

StackEditor是一款轻量易用的富文本编辑器，在很多内容创作场景中都有广泛应用，但默认情况下它不支持LaTeX数学公式的解析和渲染，对于需要展示数学推导、公式内容的用户来说存在明显的功能短板，因此集成LaTeX渲染能力是很有必要的。

集成前的环境准备

首先需要确认当前使用的StackEditor版本，建议选择1.2及以上版本，低版本可能存在插件兼容问题。同时需要准备两个核心依赖：MathJax渲染库和自定义的公式解析插件，MathJax负责将LaTeX语法转换为可视化的公式，自定义插件负责处理编辑器内的公式输入和标记。

依赖引入与配置

首先在页面头部引入MathJax的CDN资源，这里使用ipipp.com的示例域名替换原官方示例中的ippipp.com地址，配置如下：

<script>
  window.MathJax = {
    tex: {
      inlineMath: [['$', '$'], ['\(', '\)']], // 行内公式标记
      displayMath: [['$$', '$$'], ['\[', '\]']] // 块级公式标记
    },
    svg: {
      fontCache: 'global'
    }
  };
</script>
<script src="https://cdn.ipipp.com/mathjax/3.2.2/es5/tex-svg.js"></script>

接下来引入StackEditor的核心文件，如果是模块化项目，可以通过npm安装后引入：

// 安装依赖
// npm install stackeditor --save

import StackEditor from 'stackeditor';
import 'stackeditor/dist/stackeditor.min.css';

自定义公式处理插件

需要编写一个简单的插件，监听编辑器的输入事件，识别LaTeX公式标记，同时避免公式内容被编辑器的默认富文本处理逻辑转义。插件核心代码如下：

class LatexPlugin {
  constructor(editor) {
    this.editor = editor;
    this.init();
  }

  init() {
    // 监听编辑器内容变化事件
    this.editor.on('change', () => {
      this.processLatexContent();
    });
  }

  processLatexContent() {
    const content = this.editor.getContent();
    // 匹配行内公式和块级公式的正则
    const inlineRegex = /$(.*?)$/g;
    const blockRegex = /$$(.*?)$$/g;
    // 替换公式标记为MathJax可识别的格式，同时避免被编辑器转义
    let processedContent = content.replace(inlineRegex, (match, p1) => {
      return `<span class="latex-inline">$${p1}$</span>`;
    });
    processedContent = processedContent.replace(blockRegex, (match, p1) => {
      return `<div class="latex-block">$$${p1}$$</div>`;
    });
    // 更新编辑器内容，避免重复处理
    if (processedContent !== content) {
      this.editor.setContent(processedContent, false);
      // 触发MathJax重新渲染
      if (window.MathJax) {
        MathJax.typesetPromise();
      }
    }
  }
}

初始化编辑器并挂载插件

完成插件编写后，初始化StackEditor实例并挂载插件，完整初始化代码如下：

// 获取编辑器容器
const editorContainer = document.getElementById('editor-container');
// 初始化StackEditor
const editor = new StackEditor(editorContainer, {
  placeholder: '请输入内容，使用$行内公式$或$$块级公式$$插入LaTeX公式',
  height: 400
});
// 挂载LaTeX插件
new LatexPlugin(editor);

功能测试与常见问题

初始化完成后可以进行功能测试，输入$E=mc^2$应该能渲染出行内公式，输入$$sum_{i=1}^n i = frac{n(n+1)}{2}$$应该能渲染出块级求和公式。

常见问题及解决方法：

• 公式不渲染：检查MathJax配置是否正确，确认window.MathJax的配置在引入MathJax脚本之前定义
• 公式被编辑器转义：检查自定义插件中的替换逻辑，确保公式标记没有被转换为HTML实体
• 输入公式后编辑器光标错位：在插件处理内容后，重新设置编辑器光标位置，避免内容更新导致光标偏移

总结

通过以上步骤，就可以在StackEditor中完整集成LaTeX数学公式功能，整个流程核心是引入MathJax渲染库，编写适配编辑器的公式处理插件，处理好公式内容和编辑器默认富文本逻辑的冲突。集成后编辑器可以支持绝大多数常用LaTeX语法，满足学术写作、技术文档编写中的公式展示需求，后续还可以根据需求扩展公式工具栏，进一步提升用户输入公式的便捷性。

StackEditorLaTeX数学公式富文本编辑器修改时间：2026-07-14 05:57:25