javascript - 重叠不同颜色的 TEXTAREA 以获得语法高亮...流畅的复制/粘贴——可能吗?

标签 javascript jquery html textarea syntax-highlighting

我希望能够在网页中对少量可编辑文本进行语法高亮显示,前景色只有少量变化。 (让我们说三个,为了争论。)

我对 Online Rich-Text Editors 的恼人经历让我觉得管束他们的零头是不值得的。所以我有了一个古怪的想法来分层几个固定宽度的字体 <textarea>元素相互叠加,并使它们保持同步。每个都有不同的前景色,并且通过背景透明度,您可以在某个图层不应该打印的地方留下空白。浏览器会进行合成,也许一切都会很好。

在 Opera、Chrome、Firefox 和 Safari 中进行的一些探索性测试让我惊讶地发现这确实有效(虽然听起来很疯狂)。但我想使用非常纯文本的最大原因之一是复制和粘贴是万无一失的。然而,当文本像这样被分解成多个层时,没有用户可以选择并以原始形式获取所有文本的联合。

我的第一个冲动是叠加在一个顶层的文本上,该层已同步以包含来自所有层的内容,但其颜色是透明的。再一次,它“起作用”了……但不幸的是,几乎所有浏览器都根据事件的文本区域颜色提示插入点颜色。这意味着插入符号变得不可见,在某些浏览器中,您选择的文本也是如此。 (!)

因此,我征求那些比我更了解这一点的人的见解。我可以以跨浏览器的方式连接这样的堆栈,以便在您进行选择时以及当用户“复制”获得合并文本时选择是可读的吗?有没有人试过这样的事情?或者是否有证据表明“这是一个糟糕的想法,你无法让它发挥作用”?如果我可以在选择更改时获得跨浏览器通知,我可以将合并的字符注入(inject)到在选择内的点处被选中的图层中。 :-/

(哦,我们编织的网多么复杂...)

最佳答案

坏主意。你不想去那里。

您正在尝试“重新发明轮子”。一些项目已经解决了这个问题。他们的解决方案被广泛使用,因此在接下来的几周内你能想到的任何东西都更加成熟。

如果您选择一个 Online Rich Editor 并学习如何按照您想要的方式处理它,您将显着减少的时间。

你应该阅读 Jeff Atwood's post called Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels

关于javascript - 重叠不同颜色的 TEXTAREA 以获得语法高亮...流畅的复制/粘贴——可能吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13570051/

相关文章:

html - Firefox 上的 CSS 布局问题,左列末尾和页脚之间有填充空间

jQuery:将类添加到元素的子元素

javascript - 如何循环对象数组中对象内数组的所有元素?

javascript - 为什么我尝试设置带有值的 JSON 字段时会出现此错误?未捕获的类型错误 : Cannot set property 'today_avg_price' of undefined

javascript - 通过javascript传递日期对象

jquery - 如何动态更改 Div 位置(使用 Jquery/Javascript)

jquery - DatePicker 事件并不总是触发

html - 将 div 扩展到 iFrame 的边界之外?

javascript - 尝试在indexedDB中存储文件时出现错误 "The object store currently does not support blob values"

javascript - 内联编辑后如何将数据发送到服务器?