0

jquery プラグインとして JS で css エディターを作成しようとしています。これまでのところ、静的ハイライターを作成することができました。「それ」は $(editable div)

 var temp = '';
        var re = /([^{}]+)\s*{/g;
        while (m = re.exec(plainCss))
        {
            var end = plainCss.indexOf('}', m.index + m[1].length);
            temp += '<span class="selector">' + plainCss.substring(m.index, m.index + m[1].length) + '</span>';
            temp += '<span class="brace">{</span>';
            temp += '<span class="body">' + plainCss.substring(m.index + m[1].length + 1, end) + '</span>';
            temp += '<span class="brace">}</span>';
        }
        that.html(temp);

        that.find('.body').each(function(i, elem)
        {
            var text = $(elem).text();
            var re = /([^:;]+):([^:;]+);/g;
            var temp = '';
            while (m = re.exec(text))
            {
                temp += '<span class="rule">' + m[1] + '</span>';
                temp += '<span class="colon">:</span>';
                temp += '<span class="value">' + m[2] + '</span>';
                temp += '<span class="semicolon">;</span>';
            }
            $(elem).html(temp);
        });

今、入力中にライブで強調表示したいと思います。keypress イベントを登録し、(selector,body(rule,value)) でどの「スコープ」がユーザーであるかを判断し、それに応じて書かれた文字をラップします。問題は、編集可能な div のキャレット位置です。例えば。ユーザーがクリックしたとき

<span class='semicolon'>;</span>

何かを書き込み、そのイベントをブロックし、<span class='rule'>{new_character}その後に挿入すると、カーソル（キャレット）の位置は前回の場所です。キャレット操作用にいくつかのjqueryプラグインを試しましたが、実際には何も機能しませんでした...この良いアプローチが正しいかどうかはわかりません.ライブハイライターを機能させるにはどうしますか?

4

0 に答える 0