文档章节

让HTML textarea支持类似代码编辑器书写

beyond_L
 beyond_L
发布于 2015/01/20 16:06
字数 321
阅读 271
收藏 0
var stopEvent = function (evt) {
    if (evt.preventDefault)
        evt.preventDefault();
    if (evt.returnValue)
        evt.returnValue = false;
    return false;
};

String.prototype.trim = function () {
    return this.replace(/(^\s*)|(\s*$)/g, '');
};

String.prototype.lastChar = function () {
    return this.charAt(this.length - 1);
};

String.prototype.fristChar = function () {
    return this.charAt(0);
};

String.prototype.toUnicode = function () {
    var temp,
        i = 0,
        r = '',
        len = this.length;

    for (; i < len; i++) {
        temp = this.charCodeAt(i).toString(16);
        while (temp.length < 4)
            temp = '0' + temp;

        r += '\\u' + temp;
    }
    return r;
};
String.prototype.countOf = function (reg) {
    if (undefined !== reg)
        return (this.match(reg) || []).length;
    return 0;
};

String.prototype.countOfTab = function () {
    var reg = /\u0020{4}/g;
    return (this.match(reg) || []).length;
};

String.prototype.countOfTabEnter = function () {
    var reg = /\u0020{4}\u000a/g;
    return (this.match(reg) || []).length;
};

String.prototype.countOfTabInCloseTag = function () {
    var reg = /\u007b\u000a*\u0020{4}\u000a*\u007d/g;
    return (this.match(reg) || []).length;
};


window.onkeydown = function (evt) {
    evt = evt || window.event;
    var keyCode = evt.keyCode,
        tab = 9,
        enter = 13;

    var target = evt.target,
        selectionStart = -1,
        selectionEnd = -1,
        tabKey = '\u0020\u0020\u0020\u0020',
        doubleTabKey = tabKey + tabKey,
        enterKey = '\u000a',
        value = '',
        prefix = '',
        suffix = '';
    if (target && target.tagName === 'TEXTAREA') {
        selectionStart = target.selectionStart;
        selectionEnd = target.selectionEnd;
        value = target.value;
        if (selectionStart < 0 || selectionEnd < 0) {
            return;
        } else {
            prefix = value.substring(0, selectionStart);
            suffix = value.substring(selectionEnd);
        }
    } else {
        return;
    }


    //tab
    if (keyCode === tab) {
        value = prefix + tabKey + suffix;

        selectionStart += 4;
        selectionEnd = selectionStart;
        target.value = value;
        target.setSelectionRange(selectionStart, selectionEnd);

        return stopEvent(evt);
    }

    //enter
    if (keyCode === enter) {
        //{}
        var frist = prefix.trim().lastChar(),
            last = suffix.trim().fristChar(),
            count = prefix.countOf(/\u000a/g);
        if (('\u003b' === frist || '\u0029' === frist || '\u007b' === frist) && '\u007d' === last) {
            if (count === 0) {
                value = prefix + enterKey + tabKey + enterKey + suffix;
                selectionStart += 5;
            } else if (count > 0) {
                var tabs = prefix.substring(prefix.lastIndexOf('\u000a'), selectionStart).countOfTab(), i = 0, tabStr = '';
                for (; i < tabs; ++i) {
                    tabStr += tabKey;
                }
                value = '';
                value += prefix;
                value += enterKey;
                value += tabStr;
                if ('\u003b' !== frist) {
                    value += tabKey;
                    ++tabs;
                }
                if (enterKey !== suffix.fristChar()) {
                    value += enterKey;
                    value += tabStr;
                }
                value += suffix;

                selectionStart += 1 + (tabs * 4);
            }
        } else {
            value = prefix + enterKey + suffix;
            ++selectionStart;
        }

        selectionEnd = selectionStart;
        target.value = value;
        target.setSelectionRange(selectionStart, selectionEnd);

        return stopEvent(evt);
    }

};

目前只支持tab键和enter键,后续会加上智能匹配功能

© 著作权归作者所有

beyond_L

beyond_L

粉丝 113
博文 6
码字总数 7037
作品 0
深圳
前端工程师
私信 提问
开源XHTML编辑器xhEditor 0.9.5发布(增加Ajax图片上传)

xhEditor是一个基于jQuery开发的简单迷你并且高效的可视化XHTML编辑器,基于网络访问并且兼容IE 6.0-8.0,Firefox 3.0,Opera 9.6,Chrome 1.0,Safari 3.22。 最新0.9.5版添加了Ajax式的图片上传...

红薯
2009/06/03
358
0
8个好用的 WYSIWYG HTML 编辑器

1. Xinha Xinha 是一个强大的可视化HTML编辑器,可以在所有的浏览器上运行。它支持多种配置,从精简的mini编辑器到全功能的网站编辑器。 2. XStandard XStandard 是一个完全兼容标准的可视化...

虫虫
2012/03/08
24.3K
12
SharpDevelop的网友评论

JavaIDE领域,Eclipse现在的势头可谓如日中天。殊不知,在.NET领域也有一个与Eclipse极其类似的开源IDE,它就是SharpDevelop。 SharpDevelop是一个用于开发C#或者VB.NET项目而设计的一个编辑...

红薯
2009/12/11
1K
9
.NET开发工具--SharpDevelop

JavaIDE领域,Eclipse现在的势头可谓如日中天。殊不知,在.NET领域也有一个与Eclipse极其类似的开源IDE,它就是SharpDevelop。 SharpDevelop是一个用于开发C#或者VB.NET项目而设计的一个编辑...

匿名
2008/09/17
36K
2
HTML Textarea 增强程序--CodePress

CodePress是一个完全用 Javascript 写成的 HTML Textarea 增强程序,利用它,你只需要简单的修改,就可以将你网页中的 Textarea 变成一个支持语法高亮的程序编辑器。CodePress 完全开源,非常...

匿名
2012/06/25
2.5K
1

没有更多内容

加载失败,请刷新页面

加载更多

Eureka应用注册与集群数据同步源码解析

在之前的EurekaClient自动装配及启动流程解析一文中我们提到过,在构造DiscoveryClient类时,会把自身注册到服务端,本文就来分析一下这个注册流程 客户端发起注册 boolean register() t...

Java学习录
14分钟前
3
0
Java描述设计模式(15):责任链模式

本文源码:GitHub·点这里 || GitEE·点这里 一、生活场景描述 1、请假审批流程 公司常见的请假审批流程:请假天数 当 day<=3 天,项目经理审批当 3<day<=5 天,部门经理审批当 day>5 天...

知了一笑
25分钟前
3
0
总结:数组与链表

1、内存申请:数组在内存上是连续的空间;链表,内存地址上可以是不连续的。 2、查询速度:数组可以随机访问,链表必须顺序访问,即从首个元素开始遍历,逐个查找,所以数组查询很快。 3、写入...

浮躁的码农
33分钟前
5
0
HashMap源码分析

read

V丶zxw
52分钟前
5
0
Python字符串或JSON字符串转字典dict、列表list

有3种方法 1、使用ast模块 >>> import ast>>> s = '["test",1]'>>> ast.literal_eval(s)['test',1]>>> s = '{"test":1}'>>> ast.literal_eval(s){'test': 1} 2、eval函数,这个......

编程老陆
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部