编辑具有contenteditable的div时保持光标位置

时间:2015-11-16 21:40:06

标签: javascript jquery html

我正在制作一个格式化的文本编辑器,而不是基于按钮。我有以下JS:

    function titleFocus() {
        $(".title").css("border", "1px solid #666666");
    }
    function titleBlur() {
        $(".title").css("border", "none");
    }
    $(document).ready(function() {
        $('.input').bind('input propertychange', function() {
            var inputString = $(".input").html();
            var newInputString= inputString.replace(/:strong:(.*?):strong:/g, ':strong:<strong class="written">$1</strong>:strong:');
            var newInputString= newInputString.replace(/:b:(.*?):b:/g, ':b:<strong class="written">$1</strong>:b:');
            var newInputString= newInputString.replace(/:italic:(.*?):italic:/g, ':italic:<strong class="written">$1</strong>:italic:');
            var newInputString= newInputString.replace(/:i:(.*?):i:/g, ':i:<strong class="written">$1</strong>:i:');
            if (newInputString !== inputString) {
                console.log (newInputString);    
                $(".input").html(newInputString);
            }
        });
    });

问题是,在我完成格式化队列(:strong:italic)后,每次键入一个字符时,光标都会开始。最初编写格式化que后,它也会执行此操作。我怎么能阻止这个?此外,是否有更有效的方式来实现我正在做的事情?我担心每次有人输入一个角色时都会运行一大块JS会导致延迟。

编辑:显然,此代码会导致格式化的内容重复。

E.G::strong:<strong class="written"><strong class="written">TEXT</strong></strong>:strong:

0 个答案:

没有答案