2025年vue3项目使用CKEditor5+mathtype+mathjax最新配置步骤

weixin_43828096

于 2025-05-11 20:08:47 发布

阅读量787

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_43828096/article/details/147870701

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

vue3项目使用CKEditor5+mathtype+mathjax最新配置步骤

前言

提示：这里可以添加本文要记录的大概内容：

vue3项目中需要用到富文本编辑功能处理图片和数学、物理、化学公式的插入和回显编辑功能。网上搜索发现CKEditor5的构建配置教程的官方构建页面https://ckeditor.com/ckeditor-5/builder/都不是最新的页面，所以想写一下最新的配置步骤。

提示：以下是本篇文章正文内容，下面案例可供参考

使用步骤

1.打开官网构建页面

地址：https://ckeditor.com/ckeditor-5/builder/
打开如图：
在这里插入图片描述

2.开始构建配置

最新的构建是分为4个步骤：
先选择经典编辑器，然后下一步
在这里插入图片描述
添加需要的功能，右边可预览效果

第三步直接默认跳过，进入最后一步，选择中文，设置选择vue,npm和复制代码

然后按照步骤安装到自己项目中，3，4，5步照着来就行，第6步可以在自己的components文件夹下创建文件并引用。
在这里插入图片描述

3.添加数学公式

目前配置页面没有直接配置公式的功能，需要按照文档中的指导添加

在这里插入图片描述

先安装mathtype包，然后引入方式是在之前创建的组件文件中引入，并在toolbar和plugins添加即可。

在这里插入图片描述
这样富文本编辑工具栏就添加上公式功能了。

4.数学公式保存和回显

将编辑框数据中的公式部分转为LaTeX 公式进行保存，安装并引入mathml2latex
在这里插入图片描述
转换逻辑代码

// 使用 DOMParser 解析 HTML 字符串
    const parser = new DOMParser();
    const doc = parser.parseFromString(newVal, 'text/html');
    // 获取所有数学公式元素
    const mathElements = doc.getElementsByTagName('math');
    // 将 NodeList 转换为数组以便遍历
    Array.from(mathElements).forEach(mathElement => {
      try {
        // 确保 mathElement 是有效的 MathML 元素
        if (mathElement && mathElement.outerHTML) {
          const latex = mathml2latex.convert(mathElement.outerHTML);
          // 使用 $ 符号包裹 LaTeX 公式
          const latexWrapper = `$${latex}$`;
          // 替换原始元素
          mathElement.outerHTML = latexWrapper;
        }
      } catch (mathError) {
        console.error('单个 MathML 转换失败:', mathError);
      }
    });

从后端获取数据回显时，使用mathjax3
在index.html中添加

<!-- 识别单行，行内，\( \)样式的公式 -->
    <script>
        MathJax = {
            tex: {
                inlineMath: [
                    ['$', '$'],
                    ['$$', '$$'],
                    ['\\(', '\\)']
                ]
            },
        };
    </script>
    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

在数据获取更新后直接使用进行全局处理

		nextTick(() => {
          MathJax.typesetPromise();
        });

总结

以上就是自己使用CKEditor5+mathtype+mathjax的内容，本文仅仅简单介绍了相关配置步骤，为自己做个记录和为初次使用的同学提供一个参考，如果有更好的数学公式保存和回显方式或者vue3富文本引入方式，欢迎一起讨论。