如何在自定义wysiwyg编辑器中添加“TAB”功能?

时间:2012-02-02 15:54:04

标签: javascript html

按标签我的意思是空间很大,所以,当我在编辑器中写字时,我希望能够点击键盘上的标签按钮并获取空格而不是在元素之间切换。

1 个答案:

答案 0 :(得分:0)

有一些插件可以为标签字符执行此操作。这里的one非常全面。如果你只想要一些可以插入脚本的代码,我写了一些简单的东西。

var shift = false;
function codebox(element) {

    element.addEventListener("keyup", function(event) {
        if (event.keyCode == 16)
            shift = false;
    });

    element.addEventListener("keydown", function(event) { 
        if (event.keyCode == 16) {
            shift = true;
            return;
        }

        if (event.keyCode == 9) {
            var start = this.selectionStart;
            var end = this.selectionEnd;
            var lead = this.value.substr(0, start);
            var chunk = this.value.substr(start, end - start);

            if (!shift) {
                if (start == end)
                    lead = lead + "\t";
                else {
                    lead = ("\n" + lead).split("").reverse().join("").replace(/\n/, "\t\n").split("").reverse().join("").substr(1);
                    chunk = chunk.replace(/\n/g, "\n\t");
                    if (chunk.substr(-2) == "\n\t")
                        chunk = chunk.substr(0, chunk.length - 1);
                }
            } else {
                if (chunk.split("")[0] == "\t") {
                    lead = lead + "\t";
                    chunk = chunk.substr(1);
                }
                lead = ("\n" + lead).split("").reverse().join("").replace(/\t\n/, "\n").split("").reverse().join("").substr(1);
                chunk = chunk.replace(/\n\t/g, "\n");
            }

            this.value = lead + chunk + this.value.substr(end);
            this.selectionStart = lead.length;
            this.selectionEnd = lead.length + chunk.length;
            event.preventDefault();
        }
    });
}

要使用它,只需执行以下操作:

new codebox(myTextAreaElement);

由于您需要空格,请使用过程包装事件处理程序以在空格和制表符之间进行转换。