为什么不用textarea呢？ 1 没有高亮 2 tab键无法使用。——按tab键会切换到下个控件 3 没有代码格式化。——因为习惯了Eclipse的环境，可以使用ctrl+shift+F来代码进行格式化。 当然，我还没强大到自己实现的程度，而且用脚趾头都能想到肯定有人实现了，就看找不找得着。 经过了艰难的搜索，终于在SourceForge上找到一个叫EditArea的项目，感觉挺好。http://sourceforge.net/projects/editarea/ 它的sample也很清楚 在网页上用以下方法构造复制代码 代码如下: <script language="Javascript" type="text/javascript" src="../edit_area/edit_area_full.js"></script> <script language="Javascript" type="text/javascript"> // initialisation editAreaLoader.init({ id: "example_1" // id of the textarea to transform ,start_highlight: true // if start with highlight ,allow_resize: "both" ,allow_toggle: true ,word_wrap: true ,language: "zh" //国际化 ,syntax: "js" //代码的样式，支持js ,php,sql, //以下是格式化的支持 ,begin_toolbar: "btn_beautifier,|" //插入工具栏 ,plugins: "beautifier" //使用控件 }); </script> 便可以在页面中出现代码的编辑框 能够解决第一个和第二个问题，但是还能解决。 因此我又找啊找，找到这个网站：http://jsbeautifier.org/。这个网站做了一个js的格式化工具，甚至可以格式化经过某个混淆器混淆的js代码。 于是我根据上面项目中的插件规范，将这两个东东整合了起来。看上面图中的按钮，按下以后，就变成了 看，高亮和格式化都有了。 需要下载的可以从这里下载（已经包含代码格式化的插件了）：editarea_0_8_2.zip 样例见exemplesexample.html 格式化的插件实现在edit_areapluginsbeautifierbeautifier.js

　　推荐阅读

　　jQuery 打造动态渐变按钮 详细图文教程

本教程分为以下三步： Step1 - Photoshop Step2 - HTML/CSS Step3 - JavaScript(jQuery) Step4 - CSS修改 　　最终结果如下： Step1 - Photoshop 1. 新建文件 　　按钮的尺寸是100px X 80px，但由于我们需要创>>>详细阅读

本文标题：网页上的Javascript编辑器和代码格式化

地址：http://www.17bianji.com/kaifa2/JS/26528.html

 1/2    1