网页上的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 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
jquery实现的仿天猫侧导航tab切换效果
Aug 24 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
如何通过非数字与字符的方式实现PHP WebShell详解
Jul 02 Javascript
微信小程序表单验证功能完整实例
Dec 01 Javascript
javascript实现前端成语点击验证优化
Jun 24 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
cmd下运行php脚本
2008/11/25 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
CakePHP框架Session设置方法分析
2017/02/23 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
如何用javascript判断录入的日期是否合法
2007/01/08 Javascript
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
用jquery ajax获取网站Alexa排名的代码
2009/12/12 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
浅谈js的解析顺序 作用域 严格模式
2017/10/23 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
python编程-将Python程序转化为可执行程序[整理]
2007/04/09 Python
使用Python制作微信跳一跳辅助
2018/01/31 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
Python pip替换为阿里源的方法步骤
2019/07/02 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
超酷炫 CSS3垂直手风琴菜单
2016/06/28 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
美国保健品专家:Life Extension
2018/05/04 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
优秀研究生自我鉴定
2013/12/04 职场文书
农民工创业典型事迹
2014/01/25 职场文书
业务内勤岗位职责
2014/04/30 职场文书
节能减耗标语
2014/06/21 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
Python源码解析之List
2021/05/21 Python
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
Python使用BeautifulSoup4修改网页内容
2022/05/20 Python
html中两种获取标签内的值的方法
2022/06/16 jQuery