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


Posted in Javascript onApril 25, 2010

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

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

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

 

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

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

于是我根据上面项目中的插件规范,将这两个东东整合了起来。看上面图中的网页上的Javascript编辑器和代码格式化按钮,按下以后,就变成了网页上的Javascript编辑器和代码格式化

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

 

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

样例见\exemples\example.html

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

Javascript 相关文章推荐
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
javascript获取flash版本号的方法
Nov 20 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
异步JS框架的作用以及实现方法
Oct 29 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
javascript 数据存储的常用函数总结
Jun 01 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
JS实现将二维数组转为json格式字符串操作示例
Jul 12 Javascript
layui表单提交到后台自动封装到实体类的方法
Sep 12 Javascript
详解vue中多个有顺序要求的异步操作处理
Oct 29 Javascript
jQuery温习篇 强大的JQuery选择器
Apr 24 #Javascript
javascript 二分法(数组array)
Apr 24 #Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 #Javascript
JavaScript 比较时间大小的代码
Apr 24 #Javascript
google 搜索框添加关键字实现代码
Apr 24 #Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 #Javascript
javascript之AJAX框架使用说明
Apr 24 #Javascript
You might like
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php实现的农历算法实例
2015/08/11 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
javascript 实用的文字链提示框效果
2010/06/30 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
Nodejs 获取时间加手机标识的32位标识实现代码
2017/03/07 NodeJs
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
2019/04/17 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
解决vuex刷新数据消失问题
2020/11/12 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Python中exit、return、sys.exit()等使用实例和区别
2015/05/28 Python
python使用电子邮件模块smtplib的方法
2016/08/28 Python
python tkinter界面居中显示的方法
2018/10/11 Python
python查看模块安装位置的方法
2018/10/16 Python
Python3 selenium 实现QQ群接龙自动化功能
2020/04/17 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
《阳光》教学反思
2014/02/23 职场文书
春季防火方案
2014/05/10 职场文书
个人安全生产责任书
2014/07/28 职场文书
酒店采购员岗位职责
2015/04/03 职场文书
护士心得体会范文
2016/01/25 职场文书
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python