代码在线编辑(在线代码编辑器/IDE是如何实现的？)

一、在线代码编辑器/IDE是如何实现的？

textarea不能作为富文本编辑器使用，高亮加粗等在textarea中都是无法实现的，除非你手写代码。

其实一开始我以为这些代码编辑器和传统的富文本编辑器是一样的，后来发现不是的。

下面先说说富文本编辑器，为了方便区分就用引用格式了：

富文本编辑器是浏览器所支持的功能，开启designMode或者contentEditable，就可以实现富文本编辑。注：IE是最早实现富文本编辑的。
这段代码可以实现一个简单的可编辑div：

<div contentEditable style='width:500px;height100px;border:1px solid #888;'></div>

这样一来这个div就是一个编辑器，编辑器里面的内容可以有样式，粗细，颜色等等。从一个网页复制一些内容粘贴到这个编辑器里面，标签内容也会被保留。
然后通过execCommand等实现编辑器功能，具体实现比较复杂，各个浏览器不太一致，最重要的是我没研究，就不说了。

我观察了五个不同的能高亮的在线IDE（不能高亮的就算了，那肯定是textarea）。

比如这个

还有

然后我发现：这五个web IDE中，只有一个使用了将div设置为可编辑模式的方式，其余四个都没有这么做。

为什么这些在线IDE没有和传统富文本编辑器一样？

我的看法是：

1. 传统富文本编辑器遵循可见即可得原则，用户可以方便粘贴从其他地方复制过来的东西，并保持标签内容，如果复制源是其他富文本编辑器生成的内容，基本可以保证复制源和粘贴后的样式一致；而在线IDE没有这方面的要求，用户复制过去的东西反而需要去掉标签,不方便。
   
2. 光标样式。IDE里面，光标是可以通过insert键切换模式的，这个在我列举的前两个编辑器中均已实现，这个在网页中就只能靠模拟了。而且，使用css模拟光标可以让它变粗变色。
   

下面说说粘贴是怎么实现的。

按常理说，只有textarea，input这些，以及处于可编辑模式下的dom元素才会右键出现「粘贴」项。

然后我观察了下，发现这些IDE使用了textarea，下面的三个步骤可以证明这一点：

1) 以上面

为例，打开Chrome控制台，输入

document.getElementsByTagName("textarea")

控制台中会log出两个<textarea>，鼠标放在上面，你会发现，有一个textarea正好在你的光标位置。

2) 然后切换到Elements栏，定位到这个textarea。在编辑器中右键按下不放，你会发现在你按下右键的时候，这个textarea的z-index变为100000。

这是为了保证在鼠标右键按下，菜单弹出之前，textarea能保持focus状态，否则右键菜单中不会出现「粘贴」。而左键就不必要了，因为直接添加click事件发生时执行textarea.focus()就能保证textarea处于聚焦状态。

3) 给textarea绑定focus和blur事件可以发现，输入文字以及ctrl+V时，textarea是一直处于聚焦状态的。

所以很明显了，这个在线IDE输入代码是在一个隐藏textarea中进行的。然后就是把用户输入到textarea中的内容取出，再用正则之类的分析格式，加标签等等，貌似题主的问题不在这方面。

另外，出于安全原因，现在的浏览器只能由用户主动粘贴，javascript是没法直接访问剪切板内容的。

比较啰嗦。

二、前端常用的几种在线代码编辑器各有什么优势？

我们前端群规定提代码问题要有在线Demo， 关于这点总结的还算不错，搬运一下吧：

3. 没有图片的代码发

a. 在线编辑类的：
JS Bin - Collaborative JavaScript Debugging
介绍一款在线编辑器：jsbin jsbin的用法
优点：不需要登录，即发即预览
缺点：速度不靠谱
RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码
优点：国内访问速度快，可以上传图片(左下角)
缺点：需要登录，用户名
Create a new fiddle
优点：功能强大，历史记录给力，缺点：访问速度慢

参考资料：

三、编写一个在线代码编辑器需要注意什么？

首先考虑一下能提供多大资源

然后考虑一下实现功能?

现在web IDE，基本都是参考vscode，github上面有一堆解决方案。现在都连github也有webIDE功能了。

codeanywhere 几乎等于放出一个容器了，在容器内，随便折腾

https://remix.ethereum.org 其实也不错，但是属于小众领域

http://codepen.com 就低多了

web IDE倒是好说

我最近测试了在手机上写代码，居然阻碍感觉是键盘。哈哈哈

顶一下

(0)

0%

踩一下

(0)

0%