网页上的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 相关文章推荐
javascript RadioButtonList获取选中值
Apr 09 Javascript
JS无限树状列表实现代码
Jan 11 Javascript
修改js Calendar日历控件 兼容IE9/谷歌/火狐
Jan 04 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
js+html5实现可在手机上玩的拼图游戏
Jul 17 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
Jan 04 Javascript
Angular.js指令学习中一些重要属性的用法教程
May 24 Javascript
js异步编程小技巧详解
Aug 14 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
浅谈Angular 观察者模式理解
Nov 01 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
php _autoload自动加载类与机制分析
2012/02/10 PHP
PHP中的Session对象如何使用
2015/09/25 PHP
深入理解PHP中的count函数
2016/05/31 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
jQuery插件开发详细教程
2014/06/06 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
2017/12/13 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
JavaScript实现的DOM绘制柱状图效果示例
2018/08/08 Javascript
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
2019/06/14 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
React实现类似淘宝tab居中切换效果的示例代码
2020/06/02 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
跟老齐学Python之集合(set)
2014/09/24 Python
Python OS模块常用函数说明
2015/05/23 Python
使用requests库制作Python爬虫
2018/03/25 Python
使用matplotlib画散点图的方法
2018/05/25 Python
Python编译成.so文件进行加密后调用的实现
2019/12/23 Python
3个CCIE对一个工程师的面试题
2012/05/06 面试题
描述RIP和OSPF区别以及特点
2015/01/17 面试题
通信专业个人自我鉴定
2013/10/21 职场文书
社区志愿者心得体会
2014/01/03 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
旷课检讨书3000字
2014/02/04 职场文书
数字化校园建设方案
2014/05/03 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
MySQL系列之六 用户与授权
2021/07/02 MySQL
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
python开发制作好看的时钟效果
2022/05/02 Python
python热力图实现的完整实例
2022/06/25 Python