V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Gaays
V2EX  ›  Vue.js

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

  •  
  •   Gaays · 2021-11-12 11:28:13 +08:00 · 2862 次点击
    这是一个创建于 1099 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

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

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

    IBwzyd.png

    9 条回复    2022-09-16 10:32:58 +08:00
    jones2000
        1
    jones2000  
       2021-11-12 12:02:39 +08:00
    yangzzzzzz
        2
    yangzzzzzz  
       2021-11-12 14:06:58 +08:00
    [A2-E58990-5934-4-F12-980-F-8-FD0-B3-C39351.jpg]( https://postimg.cc/tZS9zXgN)
    这是我之前做的 先选操作项,然后会弹窗选操作符,如果遇到是> < =就弹变量输入框。但是我觉得不好用,也没有新的思路
    yangzzzzzz
        3
    yangzzzzzz  
       2021-11-12 14:08:31 +08:00
    Gaays
        4
    Gaays  
    OP
       2021-11-12 14:09:22 +08:00
    @jones2000 谢谢,我思维限制住了,没想到可以用 highlight 的方式实现,谢谢
    我看了一下 prismjs 也挺不错的
    Gaays
        5
    Gaays  
    OP
       2021-11-12 14:11:29 +08:00
    @yangzzzzzz 这个形式是不能在输入框手动输入吧?只能点击选择操作符,然后解析预览?和我项目的需求不太符合
    yangzzzzzz
        6
    yangzzzzzz  
       2021-11-12 14:15:24 +08:00
    @Gaays 其实可以手动在编辑的 但是我感觉那样不严谨 把手动编辑给取消掉了。我这个是多个公式最后合并成一个公式,思路就是二维数组,每一个数组里面存放一条公式
    clf
        7
    clf  
       2021-11-12 14:36:02 +08:00
    正常文本框+CSS 样式可以解决。

    有一个 css 样式,用好它就行了:

    -webkit-user-modify: read-write-plaintext-only
    Gaays
        8
    Gaays  
    OP
       2021-11-12 15:00:05 +08:00
    @clf 查了一下,这个确实也可以实现,学到了,谢谢你!
    0xD800
        9
    0xD800  
       2022-09-16 10:32:58 +08:00
    用组件化的 富文本编辑器可以开发这种编辑器 并且非常简单,推荐 textbus
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2181 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 00:32 · PVG 08:32 · LAX 16:32 · JFK 19:32
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.