MathQuill
前言
跟 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的更多相关文章
- MathQuill.js
MathQuill.js通过html.css.javascript实现数学公式 <p>Type math here: <span id="math-field"& ...
- some resource favor
http://www.moxiemanager.com/getit/ : picture file manage with blur 可以和Tinymce结合使用完美实现WYSIWYG的效果 http ...
- 试题公式解决方案--kindeditor集成jmeditor公式web编辑器
最近在搞一套在线的考试系统,一直为即支持公式编辑又得支持各种附件上传.图片上传.视频音频上传.文字编辑 的web编辑器而犯愁.于是乎试着把 kindeditor和jmeditor集成一下,多了不说了直 ...
- javascript开源大全
javascript开源大全 Ajax框架-jQuery 可视化HTML编辑器-CKEditor 国产jQuery-UI框架-(jUI)-DWZ 网页开发FireFox插件-Firebug 服务器端的 ...
- createjs小游戏开发总结
createjs缩放,html组件input的缩放,transform位置,缩放,字体的大小. 移动端横屏和竖屏幕旋转屏幕自适应,input弹出软键盘的原理和位置偏移,focus,blur弹出软键盘. ...
- 《HelloGitHub》第 85 期
兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 HelloGitHub 分享 GitHub 上有趣.入门级的开源项目. https://github.com/521xueweiha ...
随机推荐
- C#实例判空
- drawcall和batch
drawcall和batch的概念和区别可以结合冯乐乐书的前端章节和以下i链接达到透彻的理解 正如链接中所讲,batch是比drawcall所指范围更广的概念,包含了drawcall https:// ...
- 详细介绍Mybatis的缓存机制
一.缓存机制 1.缓存概述 缓存:缓存就是一块内存空间,保存临时数据 作用:将数据源(数据库或者文件)中的数据读取出来存放到缓存中,再次获取时直接从缓存中获取,可以减少和数据库交互的次数,提升程序的性 ...
- jmeter性能测试案例：电商系统并发订单测试
场景描述:本案例主要实现多用户同时提交订单,以检测系统对瞬时压力的响应情况.具体流程包括用户登录-添加商品-提交订单.涉及多个接口联动和参数处理,步骤如下: 第一步,登录用户 1.新建"下订 ...
- fiddler抓包配置
一.fiddler配置 打开tools-options 1.设置general,勾选对应选项 2.设置HTTPS,勾选Decrypt HTTPS traffic时,首次使用如果没有下载过fiddler ...
- Joomla未授权访问漏洞|CVE-2023-23752复现及修复
00 前言 这漏洞公开有阵子了好像,今天才复现了下 Jooml 在海外使用较多,是一套使用 PHP 和 MySQL 开发的开源.跨平台的内容管理系统(CMS).Joomla 4.0.0 至 4.2 ...
- redis没有启动会报什么错？？？
以下是报错信息,应该是根据项目不同,具体的不太一样,但我们能清晰的看到一句 加红,加大,加粗 Caused by: redis.clients.jedis.exceptions.JedisConnec ...
- 遇到的问题之“一个压缩流，多个文件流，在循环文件流时进行文件读时后执行下一个文件流会报错：java.io.IOException: Stream closed”
一.问题 遇到的问题之"一个压缩流,多个文件流,在循环文件流时进行文件读时后执行下一个文件流会报错:java.io.IOException: Stream closed" 二.原因 ...
- 笔记 - linux子系统更换阿里云镜像源
平时还是用 windows 多一些, 偶尔会玩一玩 linux, 之前给我一台多年的笔记本装了个 manjaro , 颜值是蛮高的, 就一点也不太熟, 就不想玩了, 还是用子系统, win 有支持 U ...
- 【公众号搬运】React-Native开发鸿蒙NEXT(2)
.markdown-body { line-height: 1.75; font-weight: 400; font-size: 16px; overflow-x: hidden; color: rg ...