I'd like to be able to syntax-highlight a small amount of editable text in a webpage, with only a few variations in foreground color. (Let's say three, for the sake of argument.)
我希望能够在网页中语法高亮显示少量可编辑文本，前景色只有少量变化。 （为了论证，我们说三个。）
My annoying experiences with Online Rich-Text Editors led me to think that reigning in their loose ends is not worth it. So I got the wacky idea to layer several fixed-width-font <textarea> elements on top of each other, and keep them in sync. Each would have a different foreground color, and through background transparency you'd just leave gaps wherever a certain layer wasn't supposed to print. The browser would do the compositing and all would be well, maybe.
我在线富文编辑的烦人体验让我觉得在他们的松散目标中统治是不值得的。所以我有一个古怪的想法是将几个固定宽度字体的
Some exploratory tests in Opera, Chrome, Firefox, and Safari suggested to my surprise that this actually works (nutty as it may sound). But one of the biggest reasons why I want to use very plain text is so that copy and paste are foolproof. Yet when the text has been broken out into layers like this, there's no union the user can select in and get all the text in its raw form.
Opera，Chrome，Firefox和Safari中的一些探索性测试让我感到惊讶，这实际上是有效的（听起来很可怕）。但是，我想使用非常纯文本的最大原因之一是复制和粘贴是万无一失的。然而，当文本被分解为这样的层时，用户无法选择并且以原始形式获取所有文本。
My first impulse was to stack on a top-level layer of text which was sync'd to contain content from all layers, but whose color was transparent. Once again, it "worked"...but unfortunately, pretty much all browsers cue the insertion point color from the textarea color that is active. That means the caret becomes invisible, and in some browsers so does the text you're selecting. (!)
我的第一个冲动是堆叠在顶层文本层上，该层同步包含来自所有层的内容，但其颜色是透明的。再次，它“工作”...但不幸的是，几乎所有的浏览器都提示插入点颜色来自活跃的textarea颜色。这意味着插入符号变得不可见，在某些浏览器中，您选择的文本也是如此。 （！）
So I solicit insights from those who know more than I about this. Can I hook such a stack in a cross-browser way so that the selection is readable while you're making it and when the user does "copy" gets the merged text? Has anyone ever tried something like this? Or is there a proof of "that's a terrible idea and there's no way you'll get it to work"? If I could get cross-browser notifications of when the selection changed, I could inject the merged characters into the layer being selected at the points inside the selection. :-/
所以我向那些比我更了解的人征求见解。我可以以跨浏览器方式挂钩这样的堆栈，以便在您创建时可以读取选择，并且当用户“复制”获取合并文本时？有没有人尝试过这样的事情？或者是否有证据表明“这是一个糟糕的想法，你无法让它发挥作用”？如果我可以获得关于选择何时更改的跨浏览器通知，我可以将合并的字符注入到选择内的点处选择的层中。 ： - /
(Oh what a tangled web we weave...)
（哦，我们编织的纠结网络......）
2 个解决方案
#1
1
It'll be far quicker for you to use existing solutions. Please look at ACE editor:
使用现有解决方案会更快。请看ACE编辑器：
http://ace.ajax.org
ACE is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. ACE is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.
ACE是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松嵌入任何网页和JavaScript应用程序中。 ACE是作为Cloud9 IDE的主要编辑器维护的，是Mozilla Skywriter（Bespin）项目的继承者。
Specifically this rich-text editor has facilities to show syntax highlighting and to show errors/line numbers, etc.
具体来说，这个富文本编辑器具有显示语法突出显示和显示错误/行号等的功能。
#2
2
Bad idea. You do not want to go there.
馊主意。你不想去那里。
You are trying to "re-invent the wheel". Some projects have already solved that problem. Their solutions are widely used, thus are more mature anything you can come up in the next weeks.
你正试图“重新发明*”。有些项目已经解决了这个问题。他们的解决方案被广泛使用，因此在接下来的几周内您可以提出任何更成熟的解决方案。
It will take you significantly less time if you pick one Online Rich Editor and learn how to handle it the way you want.
如果您选择一个在线Rich Editor并学习如何按照您的方式处理它，那么您将花费更少的时间。
You should read Jeff Atwood's post called Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels
您应该阅读杰夫阿特伍德的帖子，名为“不要重新发明*”，除非您计划更多地学习*
#1
1
It'll be far quicker for you to use existing solutions. Please look at ACE editor:
使用现有解决方案会更快。请看ACE编辑器：
http://ace.ajax.org
ACE is an embeddable code editor written in JavaScript. It matches the features and performance of native editors such as Sublime, Vim and TextMate. It can be easily embedded in any web page and JavaScript application. ACE is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.
ACE是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松嵌入任何网页和JavaScript应用程序中。 ACE是作为Cloud9 IDE的主要编辑器维护的，是Mozilla Skywriter（Bespin）项目的继承者。
Specifically this rich-text editor has facilities to show syntax highlighting and to show errors/line numbers, etc.
具体来说，这个富文本编辑器具有显示语法突出显示和显示错误/行号等的功能。
#2
2
Bad idea. You do not want to go there.
馊主意。你不想去那里。
You are trying to "re-invent the wheel". Some projects have already solved that problem. Their solutions are widely used, thus are more mature anything you can come up in the next weeks.
你正试图“重新发明*”。有些项目已经解决了这个问题。他们的解决方案被广泛使用，因此在接下来的几周内您可以提出任何更成熟的解决方案。
It will take you significantly less time if you pick one Online Rich Editor and learn how to handle it the way you want.
如果您选择一个在线Rich Editor并学习如何按照您的方式处理它，那么您将花费更少的时间。
You should read Jeff Atwood's post called Don't Reinvent The Wheel, Unless You Plan on Learning More About Wheels
您应该阅读杰夫阿特伍德的帖子，名为“不要重新发明*”，除非您计划更多地学习*