前言

跟 MathJax、KaTex 不同，mathquill 是一个真正意义上的公式编辑器。

一边输入一边渲染，输出可以是 Tex，但是对于复杂的公式，这种输入方式还是有很大的局限性，输入过程还是需要记住一些 LaTex 命令（这里可以巧妙解决）。

简单的例子

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="./mathquill-0.10.1/mathquill.css" rel="stylesheet" />

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

    <script src="mathquill-0.10.1/mathquill.js"></script>

    <title>Document</title>

  </head>

  <body>

    <span class="math-field">

      \sqrt{ \MathQuillMathField{x}^2 + \MathQuillMathField{y}^2 }

    </span>

    <script>

      // 这里MathQuill使用标准2（最新）

      const MQV2 = MathQuill.getInterface(2);

      // 静态方法：根据页面元素内容渲染一个可以编辑的公式 并返回一个MathField实例对象.

      const mathField = MQV2.MathField(document.querySelector(".math-field"), {

        handlers: {

          // 监听公式修改

          edit: function () {

            console.log(mathField.latex());

          },

        },

      });

      // 获取渲染的公式内容

      console.log(mathField.latex());

      // mathField.latex可以获取LaTeX也可也将LaTeX转换为mathField（即公式显示）

      setTimeout(()=>{

        // 3s后，公式将变为如下

        mathField.latex("2^{\\frac{3}{2}}");

      }, 3000)

    </script>

  </body>

</html>

MathQuill的更多相关文章

  1. MathQuill.js

    MathQuill.js通过html.css.javascript实现数学公式 <p>Type math here: <span id="math-field"& ...

  2. some resource favor

    http://www.moxiemanager.com/getit/ : picture file manage with blur 可以和Tinymce结合使用完美实现WYSIWYG的效果 http ...

  3. 试题公式解决方案--kindeditor集成jmeditor公式web编辑器

    最近在搞一套在线的考试系统,一直为即支持公式编辑又得支持各种附件上传.图片上传.视频音频上传.文字编辑 的web编辑器而犯愁.于是乎试着把 kindeditor和jmeditor集成一下,多了不说了直 ...

  4. javascript开源大全

    javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...

  5. createjs小游戏开发总结

    createjs缩放,html组件input的缩放,transform位置,缩放,字体的大小. 移动端横屏和竖屏幕旋转屏幕自适应,input弹出软键盘的原理和位置偏移,focus,blur弹出软键盘. ...

  6. 《HelloGitHub》第 85 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...

随机推荐

  1. QT 可绑定属性 QProperty QObjectBindableProperty QObjectComputedProperty，简化信号、槽（SIGNAL、SLOT）机制的方法

    QT提供的可绑定属性是指这些属性可以绑定到其他值或表达式上(通常是 C++ lambda 表达式).如果属性是通过表达式进行绑定,该属性会跟随表达式自动更新.可绑定属性由 QProperty 类和 Q ...

  2. 🎀Java-Exception与RuntimeException

    简介 Exception Exception 类是所有非致命性异常的基类.这些异常通常是由于编程逻辑问题或外部因素(如文件不存在.网络连接失败等)导致的,可以通过适当的编程手段来恢复或处理.Excep ...

  3. 用ResourceHacker修改EXE图标

    1.打开ResourceHacker.exe 2.点击文件-打开-选择你需要修改的exe文件 3.点击操作-添加图像或二进制文件 4.点击选择文件-选择ico图标-添加资源 5.点击绿色保存图标 6. ...

  4. 暂时永久免费高配云服务可跑32b模型

    谷歌IDX免费云主机,16核CPU,64G内存,300G硬盘! 需要谷歌账号一个,且能google,无需绑卡. 到手第一时间安装一个ollama+qwen2.5-coder:32b, 无限cursor ...

  5. .NET CORE API接口的分组、版本管理

    参照: Asp.net Core的Swagger接口根据模块.版本分组 (bbsmax.com)

  6. 【翻译】Processing系列｜（一）简介及使用方法

    下一篇:[翻译]Processing系列|(二)安卓模式的安装使用及打包发布 下下篇:[翻译] Processing系列|(三)安卓项目构建 考虑到,学习啥都肯定要先读人家的官方文档,笔者把这个系列的 ...

  7. 【保姆级教程】：开源 Qwen3 本地化部署实操详细教程

    一.教学环境 1.1Panel:现代化.开源Linux服务器管理面板 2.Ollama:开源大语言模型管理平台 3.MaxKB:强大易用的企业级 AI 助手 二.实操步骤 步骤1.1Panel 安装: ...

  8. RPC：设计可扩展且向后兼容的协议

    协议:怎么设计可扩展且向后兼容的协议? 浏览器收到命令后会封装一个请求,并把请求发送到 DNS 解析出来的 IP 上,通过抓包工具我们可以抓到请求的数据包,如下图所示: 协议的作用 RPC 请求在发送 ...

  9. C#中无法将文件”obj\debug\XXX.dll复制到“bin\Debug\XXX.dll” 拒绝访问

    较为方便有效的方法就是,把项目属性中的"应用程序集"的"程序集名称"修改为另一个名称即可.

  10. codeup之找x

    Description 输入一个数n,然后输入n个数值各不相同,再输入一个值x,输出这个值在这个数组中的下标(从0开始,若不在数组中则输出-1). Input 测试数据有多组,输入n(1<=n& ...