Quill中可视化编辑公式，并在RN中渲染

前言

前一段时间有一个需求，在富文本中可视化编辑公式，并在RN中渲染。我当时一脸懵逼，这要怎么实现。小小的一个需求，我就只知道如何使用现成的富文本。经过几天的努力，终于实现了，虽然还是使用库，但是谁叫我能缝合呢。(大部分的公式和方程式是没有问题的)。

后面有完整代码地址

先来看一下实现的效果

正文

要想实现这个功能我们可以分为这几个步骤

富文本如何渲染数学公式和化学方程式
RN如何渲染富文本的html
RN如何渲染公式
如何可视化编辑公式
如何将可视化编辑公式和富文本结合

接下来我们来一一实现

富文本如何渲染数学公式和化学方程式

富文本我们这里使用quill，Quill - 官网地址。

在他的官网我们可以看到，他自己就支持公式，我们只需要在toolbar中配置formula就可以了。

简单简单，直接动手。

保存的瞬间

研究了一会，我才明白官网中（requires KaTeX）具体是什么意思，我们需要在项目中引入katex，将下面这个放入项目中就可以了。

js 复制代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.9/katex.min.js" integrity="sha512-LQNxIMR5rXv7o+b1l8+N1EZMfhG7iFZ9HhnbJkTp4zjNr5Wvst75AqUeFDxeRUa7l5vEDyUiAip//r+EFLLCyA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

可以了

开启F12看一下他是如何渲染的，他主要是靠katex-html渲染的，katex-mathml删了都没有事。

这个katex-html很多啊，我不能把这个全部扔给后端吧，后来我试了一下，把这个给到富文本的value他就可以渲染出来。

那就好办了，我们只要使用在dom结构里找到class为ql-formula的元素，然后将他的children去掉就可以了，为什么将data-value中的\变为\\,后面再解释。

数学公式解决了，看一下化学方程式，大问题。

原来是我们还需要mhchem扩展，我们可以安装mhchemParser这个库

mhchemParser 是一个用于解析化学方程式和化学式的库。它通常用于在网页或文档中以美观和格式化的方式显示化学相关的信息

我们需要解析这个化学方程式

rust 复制代码

\\ce{SO4^2- + Ba^2+ -> BaSO4 v}

解析后

css 复制代码

{\\mathrm{SO}{\\vphantom{A}}_{\\smash[t]{4}}{\\vphantom{A}}^{2-} {}+{} \\mathrm{Ba}{\\vphantom{A}}^{2+} {}\\mathrel{\\longrightarrow}{} \\mathrm{BaSO}{\\vphantom{A}}_{\\smash[t]{4}} \\downarrow{} }

解决

还有一个问题\ce的嵌套，mhchemParser不会自己去处理嵌套问题，需要我们去处理,用一个函数来插入公式并解决\ce的嵌套。

RN如何渲染富文本的html

我们可以借助react-native-render-html这个库帮我们实现，看这个名字我知道稳了。果然它没辜负这个名字。当然了，想直接这样渲染出来是不可能的。还需要我们处理一下。继续往下看吧。

css 复制代码

<p><span class="ql-formula" data-value="\\left ( \\frac{a}{b}\\right )^{n}= \\frac{a^{n}}{b^{n}}"></span></p>

RN如何渲染公式

这个试了很多库react-native-math-view、react-native-mathjax-html-to-svg、react-native-mathjax等等，只有react-native-mathjax渲染没有问题，剩下的库有一些化学方程式渲染报错。其实可以不使用react-native-render-html因为react-native-mathjax它自己就可以渲染html，但是还有别的需求。

这样子，不行页面报错。