公式编辑器 -vue-formula-editor

已于 2024-09-11 14:38:54 修改
阅读量1.5k 收藏 8
点赞数 11
文章标签： 编辑器 vue.js 前端
于 2024-08-18 11:34:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Android_Cob/article/details/141297443
版权

前言

公式编辑旨在帮助用户使用可视化的前提，能便捷的使用平台，例如低代码平台使用广泛

在这里插入图片描述

vue-formula-editor

vue-formula-editor是一款开源的Vue公式计算组件，可以帮助开发者快速集成公式编辑

在线体验

demo & 源码
gitee源码

安装

 npm i vue-formula-editor -S

效果展示

在这里插入图片描述

低代码平台工具 —— 公式编辑器
Android_Cob的博客
08-18 1751
公式编辑器：公式编辑用于字段值来源于其他字段或是来源于函数计算结果都可由公式编辑来完成编辑器函数库事件监听。
vue实现公式编辑器组件
maqiangleader的博客
08-25 1527
基于vue 开发公式编辑器 适应网站开发需求 项目要求不可手动输入 只能点击
一个简单数学公式输入组件FormulaInput
最新发布
xzflash的博客
03-28 1073
一个支持简单数学公式计算的输入组件，基于 Vue 3 + TypeScript + Ant Design Vue 开发。 属性说明 属性名 类型 默认值 说明 modelValue string | number ‘’ 组件的值，支持 v-model 双向绑定 placeholder string ‘请输入数字或计算公式’ 输入框占位文本 disabled boolean false 是否禁用 options Option[] [] 下拉选项列表 decimalPlaces
vue 一个公式 编辑器 组件
qq_45385505的博客
06-01 4764
修改大佬的代码,原来是可以修改参数的,我这边要求不能手动修改参数
vue+elmentui+ueditor +数学公式 编辑器
09-07
把数学公式引进ueditor的工具栏上面，是编辑器可以输入数学公式
基于Vue2的简易公式编辑器（自带公式校验）
前端你鹏哥的博客
04-19 2483
基于vue2的简易公式编辑器，可应对一些简单的加减乘除算法，复制源码可直接使用
vue富文本编辑器 Vue-Quill-Editor
老张头的博客
12-01 5579
vue富文本编辑器 Vue-Quill-Editor
使用vue-quill-editor编辑器--自定义上传图片-图片拖拽-鼠标悬停提示
weixin_48371382的博客
03-31 1142
quill的官网 在vue里面使用quill的扩展模块vue-quill-editor 效果图： 实现： 1.鼠标悬停时的提示， 2.因为编辑器默认图片是base64格式，所以需要自定义上传图片到服务器，通过服务器给的ID返回给后端，后端再给出URL然后前端插入在编辑器中 3.图片的拖拽和缩放 1、下载Vue-Quill-Editor npm install vue-quill-editor --save 2、下载quill（Vue-Quill-Editor需要依赖） npm install quill
vue中使用编辑器vue-quill-editor踩过的坑
热门推荐
maggie_live的博客
03-20 1万+
结合vue+element-ui+vue-quill+editor二次封装成组件 1.图片上传 分析原因 项目中使用vue-quill-editor富文本编辑器，在编辑内容的时候，我们往往会编辑图片，而vue-quill-editor默认的处理方式是直接将图片转成base64格式，导致上传的内容十分庞大，且服务器接受post的数据的大小是有限制的，很有可能就提交失败，造成用户体验差。 引入elem...
vue 使用wangeditor实现数学公式+富文本编辑器
weixin_46175155的博客
11-28 2026
wangEditor 是一个轻量、易用且功能丰富的 Web 富文本编辑器，广泛应用于各种在线文档编辑场景。然而，在处理包含数学公式的文档时，wangEditor 原生并不支持复杂的数学表达式。幸运的是，我们可以通过集成第三方库来实现这一功能。录屏2024-11-28 11.32.55。文件，具体代码如下，注意图标引入路径。文章到此结束，希望对你有所帮助~记录高数笔记，需要插入函数。
vue+elmentui+ueditor +KityFormula数学公式 编辑器.zip
09-22
vue+elmentui+ueditor +KityFormula数学公式 编辑器。下载以后通过npm install 。然后npm run dev运行
vue elmentui ueditor 数学公式 +新增自定义工具栏按钮 编辑器
12-17
因为上传数学题时。填空题横线统一的让用户点击工具栏的一个按钮实现。然后数学公式没有方程式的功能，需要加个工具实现这个功能。然后下载项目打开命令行，再输入npm install 下载包依赖。在npm run dev 运行就行啦
vue+elmentui+ueditor +数学公式 编辑器。完整版
09-17
这个里面有获取编辑器内容和设置编辑器内容。两种方法，是以前上传的https://download.csdn.net/download/qq_33769914/10651952这个地址的整理。
VUE + Jquery 集成的一个简易数学公式编辑器
weixin_42429220的博客
02-26 4181
前端数学公式自定义编辑 界面 可自定义未知数、运算符号、函数 代码地址
【一个简单的vue公式编辑器组件】
qq_42989165的博客
08-23 4597
基于vue实现数据统计公式的基本功能
vue数学公式编辑器_将Vue包装器用于MathLive数学编辑器的示例
cuk5340的博客
07-26 5634
vue数学公式编辑器 Vue-Mathlive (vue-mathlive) The MathLive Vue wrapper provides a Vue component that implements a <mathfield> HTML tag. MathLive Vue包装器提供了实现<mathfield> HTML标签的Vue组件。 The compone...
vue富文本编辑器支持mathjax数学公式
小郑的博客
10-24 1万+
富文本编辑器wangEditor集成mathjax数学公式
vue-formula-editor
01-05
### Vue Formula Editor Component or Library 对于寻找与 Vue 相关的公式编辑器组件或库的需求，可以考虑使用 KaTeX 或 MathQuill 这样的工具来实现公式的渲染和编辑功能[^1]。 #### 使用 KaTeX 和 vue-katex 组件 KaTeX 是一个快速的 LaTeX 渲染引擎。`vue-katex` 是基于 KaTeX 构建的一个简单易用的 Vue.js 组件： ```html <template> <div id="app"> <katex-element expression="\int_0^\infty e^{-x^2} dx=\frac{\sqrt\pi}2"/> </div> </template> <script> import { KatexElement } from 'vue-katex' export default { components: { KatexElement, }, } </script> ``` 此方法适用于需要展示静态数学表达式的场景。 #### 使用 MathQuill 实现富文本编辑中的公式输入 MathQuill 提供了一个更加交互性的解决方案，在线编写LaTeX语法的同时能够实时预览效果。为了将其集成到 Vue 应用程序中，可以通过封装自定义组件的方式完成： ```javascript // main.js 中引入 mathquill 并挂载至全局变量以便于后续调用 import 'mathquill/build/mathquill.css'; window.MathQuill = require('mathquill'); ``` 接着创建名为 `FormulaEditor.vue` 的文件用于构建可编辑区域: ```html <!-- FormulaEditor.vue --> <template> <span ref="formulaField"></span> </template> <script> export default { mounted() { const MQ = window.MathQuill.getInterface(2); this.mathField = MQ.StaticMath(this.$refs.formulaField); } }; </script> ``` 上述两种方案分别针对不同需求提供了相应的解决办法：一种适合简单的公式显示；另一种则更适合复杂的在线编辑环境。
评论 19
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这次最后一次熬夜

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值