网页上的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

赞 (0)

相关推荐

  • 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清理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将从数据库中读取出来的日期型格式化为想要的类型。

    复制代码 代码如下: //传入从数据库中取出的日期类型数据 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格式化日期时间的方法和自定义格式化函数示例

    很多时候,我们可以利用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格式化日期时间函数

    复制代码 代码如下: 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编辑器和代码格式化

    网页上的Javascript编辑器和代码格式化

    为什么不用textarea呢? 1 没有高亮 2 tab键无法使用.--按tab键会切换到下个控件 3 没有代码格式化.--因为习惯了Eclipse的环境,可以使用ctrl+shift+F来代码进行格式化. 当然,我还没强大到自己实现的程度,而且用脚趾头都能想到肯定有人实现了,就看找不找得着. 经过了艰难的搜索,终于在SourceForge上找到一个叫EditArea的项目,感觉挺好.http://sourceforge.net/projects/editarea/ 它的sample也很清楚 在

  • Python爬虫爬取一个网页上的图片地址实例代码

    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实现网页上随滚动条滚动的层效果代码

    本文实例讲述了JS实现网页上随滚动条滚动的层效果代码.分享给大家供大家参考,具体如下: 这款网页上随滚动条滚动层代码,拖动滚动条即可看到效果,对联广告的代码也都是基于此的,右侧的浮动层同样是可以关闭的稍微加工,便可实现一个浮动广告的代码,运行一下,先看效果吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-fixed-scroll-adv-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • jQuery实现的网页左侧在线客服效果代码

    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 在网页上单击鼠标的地方显示层及关闭层

    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

随机推荐