微信小程序--支持ckeditor编辑器中mathquill数学公式_小程序解决数学公式渲染问题

使用Towxml解析ckeditor文本编辑器中mathquill数学公式

显示如下效果：

 

一、微信小程序中构建Towxml

参考之前文章：https://blog.csdn.net/qq_33848658/article/details/115234194

二、使用

1、单独封装mathquill.css

2、towxml/towxml.wxss中引入mathquill.css

/* mathquill数学公式样式 */
@import './style/theme/mathquill.wxss'

3、mathquill/index.js 转化数学公式

// pages/mathquill/index.js
const app = getApp()
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    questionsContent: null, //单选题目
    option: [{
        option: "A",
      value: '<p><span class="mq-math-mode" latex-data="\sum_{n=0}^{\infty}k^2"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><span class="mq-large-operator mq-non-leaf" mathquill-command-id="3"><span class="mq-to"><span mathquill-block-id="5"><span mathquill-command-id="12">&infin;</span></span></span><big>&sum;</big><span class="mq-from"><span mathquill-block-id="4"><var mathquill-command-id="6">n</var><span class="mq-binary-operator" mathquill-command-id="8">=</span><span mathquill-command-id="10">0</span></span></span></span><var mathquill-command-id="15">k</var><span class="mq-supsub mq-non-leaf mq-sup-only" mathquill-command-id="17"><span class="mq-sup" mathquill-block-id="19"><span mathquill-command-id="18">2</span></span></span></span></span><span>&nbsp;</span></p>↵'
      },
      {
        option: "B",
        value: '<p><span class="mq-math-mode" latex-data="\sum_2^1"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><span class="mq-large-operator mq-non-leaf" mathquill-command-id="3"><span class="mq-to"><span mathquill-block-id="5"><span mathquill-command-id="7">1</span></span></span><big>&sum;</big><span class="mq-from"><span mathquill-block-id="4"><span mathquill-command-id="8">2</span></span></span></span></span></span><span>&nbsp;</span></p>'
      },
      {
        option: "C",
        value: '<p><span class="mq-math-mode" latex-data="\log_1^n"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><var class="mq-operator-name" mathquill-command-id="4">l</var><var class="mq-operator-name" mathquill-command-id="5">o</var><var class="mq-operator-name" mathquill-command-id="6">g</var><span class="mq-supsub mq-non-leaf" mathquill-command-id="11"><span class="mq-sup" mathquill-block-id="13"><var mathquill-command-id="12">n</var></span><span class="mq-sub" mathquill-block-id="9"><span mathquill-command-id="15">1</span></span><span style="display:inline-block;width:0">​</span></span></span></span><span>&nbsp;</span></p>'
      },
      {
        option: "D",
        value: '<p><span class="mq-math-mode" latex-data="\ln2"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><var class="mq-operator-name" mathquill-command-id="28">l</var><var class="mq-operator-name mq-last" mathquill-command-id="29">n</var><span mathquill-command-id="31">2</span></span></span><span>&nbsp;</span></p>'
      }
    ] //选项
 
  },
 
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    let questionsContent = '<p><span class="mq-math-mode" latex-data="^1/_2"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><span class="mq-supsub mq-non-leaf mq-sup-only" mathquill-command-id="3"><span class="mq-sup" mathquill-block-id="4"><span mathquill-command-id="11">1</span></span></span><span mathquill-command-id="6">/</span><span class="mq-supsub mq-non-leaf" mathquill-command-id="8"><span class="mq-sub" mathquill-block-id="9"><span mathquill-command-id="12">2</span></span><span style="display:inline-block;width:0">​</span></span></span></span><span>&nbsp;</span><span class="mq-math-mode" latex-data="\overleftarrow{ab}"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><span class="mq-non-leaf mq-overarrow mq-arrow-left" mathquill-block-id="23" mathquill-command-id="21"><var mathquill-command-id="22">a</var><var mathquill-command-id="24">b</var></span></span></span><span>&nbsp;</span><span class="mq-math-mode" latex-data="x^1"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><var mathquill-command-id="27">x</var><span class="mq-supsub mq-non-leaf mq-sup-only" mathquill-command-id="29"><span class="mq-sup" mathquill-block-id="30"><span mathquill-command-id="32">1</span></span></span></span></span><span>&nbsp;</span><span class="mq-math-mode" latex-data="x_1"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><var mathquill-command-id="33">x</var><span class="mq-supsub mq-non-leaf" mathquill-command-id="35"><span class="mq-sub" mathquill-block-id="36"><span mathquill-command-id="38">1</span></span><span style="display:inline-block;width:0">​</span></span></span></span><span>&nbsp;</span><span class="mq-math-mode" latex-data="x_2^1"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" spellcheck="false" x-palm-disable-ste-all="true"></textarea></span><span class="mq-root-block" mathquill-block-id="1"><var mathquill-command-id="39">x</var><span class="mq-supsub mq-non-leaf" mathquill-command-id="44"><span class="mq-sup" mathquill-block-id="42"><span mathquill-command-id="47">1</span></span><span class="mq-sub" mathquill-block-id="45"><span mathquill-command-id="48">2</span></span><span style="display:inline-block;width:0">​</span></span></span></span><span>&nbsp;</span></p>'
 
    this.data.questionsContent = app.towxml(questionsContent, 'markdown'); //towxml解析题内容
 
    this.data.option.forEach((item, index) => {
      this.data.option[index].value = app.towxml(item.value, 'markdown')
    })
 
 
    // 更新解析数据
    this.setData({
      questionsContent: this.data.questionsContent,
      option: this.data.option
    });
  },
})

备注：mathquill数学公式转化在线转化：http://www.jmeditor.com/jme/demo.html

如下图所示：

 

4、mathquill/index.json 中构建组件

    "towxml": "/towxml/towxml"

5、显示mathquill/index.wxml中渲染数学公式

<!--pages/mathquill/index.wxml-->
<view>
  <towxml nodes="{{questionsContent}}" />
  <view class="radio my-choosebox" wx:for="{{option}}">
    <text>{{item.option}}</text>
    <towxml nodes="{{item.value}}" />
  </view>
</view>

  6、demo源码参考：https://download.csdn.net/download/qq_33848658/16265383