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

2019-12-24,,,

为什么不用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


样例见\exemples\example.html


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

您可能感兴趣的文章:

  • javascript格式化日期时间函数
  • javascript 清除输入框中的数据
  • 用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
  • javascript数字格式化通用类 accounting.js使用
  • JavaScript格式化日期时间的方法和自定义格式化函数示例
  • javascript清理table样式

《网页上的Javascript编辑器和代码格式化.doc》

下载本文的Word格式文档,以方便收藏与打印。