网页上的Javascript编辑器和代码格式化_javascript技巧

为什么不用textarea呢？

1 没有高亮

2 tab键无法使用。——按tab键会切换到下个控件

3 没有代码格式化。——因为习惯了Eclipse的环境，可以使用ctrl+shift+F来代码进行格式化。

当然，我还没强大到自己实现的程度，而且用脚趾头都能想到肯定有人实现了，就看找不找得着。

经过了艰难的搜索，终于在SourceForge上找到一个叫EditArea的项目，感觉挺好。http://sourceforge.net/projects/editarea/

它的sample也很清楚

在网页上用以下方法构造

复制代码 代码如下:

便可以在页面中出现代码的编辑框

 

能够解决第一个和第二个问题，但是还能解决。

因此我又找啊找，找到这个网站：http://jsbeautifier.org/。这个网站做了一个js的格式化工具，甚至可以格式化经过某个混淆器混淆的js代码。

于是我根据上面项目中的插件规范，将这两个东东整合了起来。看上面图中的按钮，按下以后，就变成了

看，高亮和格式化都有了。

 

需要下载的可以从这里下载（已经包含代码格式化的插件了）：editarea_0_8_2.zip

样例见exemples\example.html

格式化的插件实现在edit_area\plugins\beautifier\beautifier.js