htmledit_views">
使用Towxml解析ckeditor文本编辑器中mathquill数学公式
显示如下效果:
一、微信小程序中构建Towxml
参考之前文章:https://blog.csdn.net/qq_33848658/article/details/115234194
二、使用
1、单独封装mathquill.css
2、towxml/towxml.wxss中引入mathquill.css
html" title=javascript>javascript">/* mathquill数学公式样式 */
@import './style/theme/mathquill.wxss'
3、mathquill/index.js 转化数学公式
html" title=javascript>javascript">// 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">∞</span></span></span><big>∑</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> </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>∑</big><span class="mq-from"><span mathquill-block-id="4"><span mathquill-command-id="8">2</span></span></span></span></span></span><span> </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> </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> </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> </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> </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> </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> </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> </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 中构建组件
html" title=javascript>javascript"> "towxml": "/towxml/towxml"
5、显示mathquill/index.wxml中渲染数学公式
html"><!--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