未分類
14 1 月 2022

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

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

資深大佬 : Gaays 32

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

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

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

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

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

大佬有話說 (8)

  • 資深大佬 : 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 查了一下,这个确实也可以实现,学到了,谢谢你!