code.google.com 中使用的内联编辑和格式设置如何工作？
最近，code.google.com 添加了编辑文件和语法突出显示的功能！
据我所知，他们在 iframe 中添加了一个文本区域，其中文本区域是您输入内容的地方， iframe 显示格式。文本区域向上移动（如-10000 px 或其他），因此它是不可见的。
我不明白的是他们如何设法让 iframe 内容表现得像文本区域。例如，如果您复制并粘贴一堆代码，它们会立即对其进行格式化。
这很有趣。谁能解释一下这是如何工作的？
Recently code.google.com added the feature to edit a file and syntax highlight it!
From what I can understand they added a textarea along with at iframe, where the textarea is where you type in content and the iframe displays the formatting. The textarea is moved up ( like -10000 px or something ) so it is invisible.
What I don't get is how they manage to have the iframe content behaving like a textarea. For instance if you copy and paste a bunch of code they format it immediately.
This is very interesting. Can anyone explain a bit on how does this works?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
Google 代码使用 CodeMirror 用于编辑。
以下是作者编写的有关其内部结构的文档：
JavaScript 编辑器——在 JavaScript 中：一次探索 DOM 树阴暗面的残酷冒险。
Google Code uses CodeMirror for editing.
Here are documents about its internals written by the author:
JavaScript Editor—In JavaScript : A brutal odyssey to the dark side of the DOM tree.
大量的 JavaScript 和自定义事件处理。这个问题并不容易回答，因为它是一个复杂的软件。
他们可能使用带有
contentEditable="true"的来使文本可编辑，文本区域可能用于捕获不支持它的浏览器上的输入（或者甚至出于其他原因，如果不进行更多分析，我就无法判断）。他们还需要为每种支持的语言提供一个词法分析器。这可以在客户端或服务器端完成，以确定应用于每个令牌的样式，再加上一些繁重的 DOM 操作（例如可能使用像 jQuery 这样的库，以简化对树的更新）。
Lot's and lot's of javascript and custom event handling. It's not so easy to answer since it's a complex piece of software.
They are probably using an
<iframe>withcontentEditable="true"to make the text editable, the textarea might be there to capture input on browsers that do not support it (or even for some other reason, I can't tell without more analysis).They also need a lexer for each supported language. This can be done client or server side, to identify which style to apply to each token, plus some heavy DOM manipulation (probably using a library like jQuery for example, to simplify updates to the tree).