网页上的Javascript编辑器和代码格式化
为什么不用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>
便可以在页面中出现代码的编辑框
能够解决第一个和第二个问题,但是还能解决。
因此我又找啊找,找到这个网站:http://jsbeautifier.org/。这个网站做了一个js的格式化工具,甚至可以格式化经过某个混淆器混淆的js代码。
于是我根据上面项目中的插件规范,将这两个东东整合了起来。看上面图中的按钮,按下以后,就变成了
看,高亮和格式化都有了。
需要下载的可以从这里下载(已经包含代码格式化的插件了):editarea_0_8_2.zip
样例见\exemples\example.html
格式化的插件实现在\edit_area\plugins\beautifier\beautifier.js
相关推荐
-
javascript清理table样式
项目中遇到这样的需求,一大段文章正文的html代码在手机中显示不全,原因是由于其它有table,而table表格中的tr/td都携带了从word中粘贴过来的样式,需要将这一大段的字符串中的table.tr.td中携带的样式清除掉,同时还不能破坏table结构,即要保留tr中的rowspan和td中的colspan属性. html部分代码如下: <p class="MsoNormal" align="left" style="text-align:le
-
JavaScript格式化日期时间的方法和自定义格式化函数示例
很多时候,我们可以利用JavaScript中Date对象的内置方法来格式化,如: 复制代码 代码如下: var d = new Date();console.log(d); // 输出:Mon Nov 04 2013 21:50:33 GMT+0800 (中国标准时间)console.log(d.toDateString()); // 日期字符串,输出:Mon Nov 04 2013console.log(d.toGMTString()); // 格林威治时间,输出:Mon, 04 Nov 20
-
javascript 清除输入框中的数据
<li id=""><span>***</span>评论<span>鲜果</span><a href="#message_area" onclick=" fillInMessageArea(this);">回复</a></li> <li id=""><span>pizicai</span>评论&l
-
javascript数字格式化通用类 accounting.js使用
代码内容及下载地址 accounting.js代码如下: 复制代码 代码如下: /*! * accounting.js v0.3.2 * Copyright 2011, Joss Crowcroft * * Freely distributable under the MIT license. * Portions of accounting.js are inspired or borrowed from underscore.js * * Full details and documenta
-
javascript格式化日期时间函数
复制代码 代码如下: function DateUtil(){}/***功能:格式化时间*示例:DateUtil.Format("yyyy/MM/dd","Thu Nov 9 20:30:37 UTC+0800 2006 ");*返回:2006/11/09*/DateUtil.Format=function(fmtCode,date){ var result,d,arr_d; var patrn_now_1=/^y{4}-M{2}-d{2}\sh
-
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
复制代码 代码如下: //传入从数据库中取出的日期类型数据 function getformatdate(d){ var formate_datetime; var array = d.split(" "); var date = array[0]; var time = array[1]; var array_date = date.split("-"); var array_time = time.split(":"); var second
-
网页上的Javascript编辑器和代码格式化
为什么不用textarea呢? 1 没有高亮 2 tab键无法使用.--按tab键会切换到下个控件 3 没有代码格式化.--因为习惯了Eclipse的环境,可以使用ctrl+shift+F来代码进行格式化. 当然,我还没强大到自己实现的程度,而且用脚趾头都能想到肯定有人实现了,就看找不找得着. 经过了艰难的搜索,终于在SourceForge上找到一个叫EditArea的项目,感觉挺好.http://sourceforge.net/projects/editarea/ 它的sample也很清楚 在
-
Python爬虫爬取一个网页上的图片地址实例代码
本文实例主要是实现爬取一个网页上的图片地址,具体如下. 读取一个网页的源代码: import urllib.request def getHtml(url): html=urllib.request.urlopen(url).read() return html print(getHtml(http://image.baidu.com/search/flip?tn=baiduimage&ie=utf-8&word=%E5%A3%81%E7%BA%B8&ct=201326592&am
-
JS实现网页上随滚动条滚动的层效果代码
本文实例讲述了JS实现网页上随滚动条滚动的层效果代码.分享给大家供大家参考,具体如下: 这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3
-
jQuery实现的网页左侧在线客服效果代码
本文实例讲述了jQuery实现的网页左侧在线客服效果代码.分享给大家供大家参考,具体如下: 这是又一个网页上的在线客服代码,不错,可以用一下哦.与其它客服不一样的地方呢?无非是在网页左侧滑出,可对客服类型分组,又多了一个功能,哈哈. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-left-online-kf-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
-
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
原理就是循环获取网页上的控件,然后设置disabled 属性为true. 代码如下: 复制代码 代码如下: <script type="text/javascript"> var nodeList = document.getElementsByTagName("input"); for (var i = 0; i < nodeList.length; i++) { nodeList[i].disabled = true;
-
JavaScript 在网页上单击鼠标的地方显示层及关闭层
在网页上单击鼠标的地方显示层,供用户选择地点,同时把用户选择的地点显示在文本框中.主要是控制层的显示.隐藏. 复制代码 代码如下: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>层的隐藏显示练习</TITLE> <STYLE type="text/css&qu
-
JavaScript基于Ajax实现不刷新在网页上动态显示文件内容
本文实例讲述了JavaScript基于Ajax实现不刷新在网页上动态显示文件内容的方法.分享给大家供大家参考.具体如下: 下面的JS代码是一个最基础的JS的ajax实现,可以动态显示服务器上的文件ajax_info.txt文件的内容 <!DOCTYPE html> <html> <head> <title>sharejs.com</title> <script> function loadXMLDoc() { var xmlhttp;
-
JavaScript实现网页图片等比例缩放实现代码及调用方式
在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小. Javascript: 复制代码 代码如下: < script language="javascript" type="text/javascript"> < !-- // 说明:用 JavaScript 实现网页图片等比例缩放 // 整理:http://www.CodeB
-
基于JavaScript实现 网页切出 网站title变化代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-"> <title>这里是网站标题</title> </head> <body> <script type="text/javascript"> document.body.onfocus = function
-
一个Javascript 编写的代码编辑器
EditArea : http://sourceforge.net/projects/editarea 特点:1. 一个 Javascript 编写的代码编辑器, 支持代码加亮, 缩进, 行号等特征; 2. A free javascript editor for source code. It allow to write well formated source code with line numerotation, tab support, search & replace (with
随机推荐
- MySQL分支选择参考:Percona还是MariaDB
- js 模式窗口(模式对话框和非模式对话框)的使用介绍
- PHP和正则表达式教程集合之二第1/2页
- VPS CentOS-6 下 LNMP HTTP web服务器的搭建步骤
- iOS为UIView设置阴影效果
- js前端日历控件(悬浮、拖拽、自由变形)
- document.designMode的功能与使用方法介绍
- PHP编程求最大公约数与最小公倍数的方法示例
- 使用Python编写提取日志中的中文的脚本的方法
- springMVC解决ajax请求乱码的三种方法
- C#给图片加水印的简单实现方法
- Bootstrap实现响应式导航栏效果
- ASP.NET在底层类库中获取Session C#类中获取Session 原创
- jquery 屏蔽一个区域内的所有元素,禁止输入
- JS和函数式语言的三特性
- 系统参数中,设置“由平台收集后备案”是什么意思?
- Android通过Handler与AsyncTask两种方式动态更新ListView(附源码)
- Android UI仿QQ好友列表分组悬浮效果
- Python反射用法实例简析
- iOS 设置导航条透明效果的实例代码