网页上的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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
jQuery $命名冲突解决方案汇总
Nov 13 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jQuery满屏焦点图左右滚动特效代码分享
Sep 07 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
微信小程序 数组中的push与concat的区别
Jan 05 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 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 用sock技术发送邮件的函数
2007/07/21 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php Xdebug 调试扩展的安装与使用.
2010/03/13 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
PHP中使用curl入门教程
2015/07/02 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
php正则表达式使用方法整理集合
2020/01/31 PHP
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
2013/01/27 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
javascript学习笔记之10个原生技巧
2014/05/21 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
2020/03/09 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
[01:48]帕吉至宝加入游戏,遗迹战场现“千劫神屠”
2018/04/07 DOTA
[01:03:50]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第二场 2月7日
2021/03/11 DOTA
Python 元类使用说明
2009/12/18 Python
浅谈flask中的before_request与after_request
2018/01/20 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
numpy按列连接两个维数不同的数组方式
2019/12/06 Python
Python是怎样处理json模块的
2020/07/16 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
信号量和自旋锁的区别?如何选择使用?
2015/09/08 面试题
优秀医生事迹材料
2014/02/12 职场文书
防灾减灾活动总结
2014/08/30 职场文书
一份文言文检讨书
2014/09/13 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
房屋买卖协议书范本
2014/09/27 职场文书
党员教师自我剖析材料
2014/09/29 职场文书
单位委托函范文
2015/01/29 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
详解MindSpore自定义模型损失函数
2021/06/30 Python