⼩程序--⽀持ckeditor编辑器中mathquill数学公式使⽤Towxml解析ckeditor⽂本编辑器中mathquill数学公式
显⽰如下效果：
⼀、⼩程序中构建Towxml
⼆、使⽤
1、单独封装mathquill.css
2、towxml/towxml.wxss中引⼊mathquill.css
/* mathquill数学公式样式 */135编辑器手机版
@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" a      },
{
option: "B",
value: '<p><span class="mq-math-mode" latex-data="\sum_2^1"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect=      },
{
option: "C",
value: '<p><span class="mq-math-mode" latex-data="\log_1^n"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="o      },
{
option: "D",
value: '<p><span class="mq-math-mode" latex-data="\ln2"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" autocorrect="off" sp      }
] //选项
},
/**
* ⽣命周期函数--监听页⾯加载
*/
onLoad: function(options) {
let questionsContent = '<p><span class="mq-math-mode" latex-data="^1/_2"><span class="mq-textarea"><textarea autocapitalize="off" autocomplete="off" aut    this.data.questionsContent =
wxml(questionsContent, 'markdown'); //towxml解析题内容
this.data.option.forEach((item, index) => {
this.data.option[index].value = wxml(item.value, 'markdown')
})
// 更新解析数据
this.setData({
questionsContent: this.data.questionsContent,
option: this.data.option
});
},
})
如下图所⽰：
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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。