zzugbb / formula-edit

此工程为公式在线编辑demo

About me 👋

• 🔭 I’m currently working on Frontend development

• 🌱 Sharing awesome-my-website, Learning, Work, Entertainment, My Star, Catch all in one draft.

• ⚡ Sharing My blog, Hoping it can be updated frequently

formula-edit's Issues

mathJax使用说明

说明

本文档主要对公式渲染组件 MathJax 整体部署及使用加以说明。

整理时间

2018-07-25

MathJax介绍

MathJax 是一个 JavaScript 引擎，用来显示网络上的数学公式。它可以工作于所有流行的浏览器上。

使用场景

MathType公式 都转化为了 latex公式代码。

接口将其题目查出后返回到页面展示层，为了能够正确展示给用户看，需要用到渲染组件MathJax。

具体效果

使用组件渲染前的题目效果

使用组件渲染后的题目效果

具体使用

页面引入

<script type="text/javascript" src="/MathJax/2.7.2/MathJax.js?config=TeX-AMS_CHTML"></script>

页面代码

<div>$\frac{x^3}{e^x-1}$</div> 

页面Js相关配置项

MathJax.Hub.Config({
  showProcessingMessages: false,
  messageStyle: "none", 
  extensions: ["tex2jax.js"],
  jax: ["input/TeX", "output/HTML-CSS"],
  tex2jax: {inlineMath: [["$","$"],["\\(","\\)"],["\[","\]"]]},
});

注意事项&&问题

试题相关信息可能是页面发异步请求而得到的，由于js执行顺序的问题，此时需要在渲染完毕的回调中加入代码，保证能够正确渲染。

MathJax.Hub.Queue(["Typeset", MathJax.Hub]);

参考资料

• MathJax官网
• MathJax官方文档
• 整合MathjaxJS的配置笔记

公式编辑组件

公式编辑组件-2.0版本.docx

富文本编辑器选型

富文本编辑器选型.docx

参考资料

• 下载地址
• 官方文档
• 经典的 Web 编辑器——CKEditor 介绍
• 富文本编辑器 CKeditor 配置使用