微信小程序--支持ckeditor编辑器中mathquill数学公式

最新推荐文章于 2024-08-08 07:56:30 发布

To-strive

最新推荐文章于 2024-08-08 07:56:30 发布

阅读量2k

点赞数

分类专栏：微信小程序文章标签： javascript es6 html css

本文链接：https://blog.csdn.net/qq_33848658/article/details/115325987

版权

使用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>&