网页上的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 相关文章推荐
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
javascript中的window.location.search方法简介
Sep 02 Javascript
javascript函数中参数传递问题示例探讨
Jul 31 Javascript
Svg.js实例教程及使用手册详解(一)
May 16 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
如何利用JQuery实现从底部回到顶部的功能
Dec 27 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
JS选取DOM元素常见操作方法实例分析
Dec 10 Javascript
详解js中let与var声明变量的区别
Apr 05 Javascript
vuex实现购物车功能
Jun 28 Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 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中防止SQL注入最好的方法是什么
2013/06/10 PHP
2014过年倒计时示例
2014/01/31 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
PHP安全下载文件的方法
2016/04/07 PHP
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
2011/03/25 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
10个基于浏览器的JavaScript调试工具分享
2013/02/07 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
JS常用字符串处理方法应用总结
2014/05/22 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
使用Python对MySQL数据操作
2017/04/06 Python
对Python中列表和数组的赋值,浅拷贝和深拷贝的实例讲解
2018/06/28 Python
python统计中文字符数量的两种方法
2019/01/31 Python
python 字符串追加实例
2019/07/20 Python
基于pandas中expand的作用详解
2019/12/17 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
python实现全排列代码(回溯、深度优先搜索)
2020/02/26 Python
Python3通过chmod修改目录或文件权限的方法示例
2020/06/08 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
html5简介_动力节点Java学院整理
2017/07/07 HTML / CSS
保密普查工作实施方案
2014/02/25 职场文书
专题组织生活会思想汇报
2014/10/01 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
大学军训的体会
2014/11/08 职场文书
公证处委托书
2015/01/28 职场文书
小学数学教学随笔
2015/08/14 职场文书
个人工作总结怎么写?
2019/04/09 职场文书
工作简历的自我评价
2019/05/16 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
Win11安装升级时提示“该电脑必须支持安全启动”
2022/04/19 数码科技