问下大家,有前端的公式编辑器组件推荐或者处理思路吗

[Gaays]

目前项目想实现一个像钉钉一样的公式编辑器,不需要支持数学公式,只需要像下图这样的,能把表单字段高亮显示并且支持光标操作.

我的思路是自己写代码渲染这个输入框,输入数学符号通过监听对应按键和鼠标事件实现

但是光标点击定位问题不确定该如何实现

想问一下大家有没有现成的组件或者能提供一下光标定位的思路,谢谢

[jones2000]

https://www.npmjs.com/package/vue-codemirror

[yangzzzzzz]

[A2-E58990-5934-4-F12-980-F-8-FD0-B3-C39351.jpg]( https://postimg.cc/tZS9zXgN)
这是我之前做的 先选操作项，然后会弹窗选操作符，如果遇到是> < =就弹变量输入框。但是我觉得不好用，也没有新的思路

[yangzzzzzz]

补一下图片
https://i.postimg.cc/Vv15mvQp/A2-E58990-5934-4-F12-980-F-8-FD0-B3-C39351.jpg

[Gaays]

@jones2000 谢谢,我思维限制住了,没想到可以用 highlight 的方式实现,谢谢
我看了一下 prismjs 也挺不错的

[Gaays]

@yangzzzzzz 这个形式是不能在输入框手动输入吧?只能点击选择操作符,然后解析预览?和我项目的需求不太符合

[yangzzzzzz]

@Gaays 其实可以手动在编辑的 但是我感觉那样不严谨 把手动编辑给取消掉了。我这个是多个公式最后合并成一个公式，思路就是二维数组，每一个数组里面存放一条公式

[clf]

正常文本框+CSS 样式可以解决。

有一个 css 样式，用好它就行了：

-webkit-user-modify: read-write-plaintext-only

[Gaays]

@clf 查了一下,这个确实也可以实现,学到了,谢谢你!

[0xD800]

用组件化的 富文本编辑器可以开发这种编辑器 并且非常简单，推荐 textbus