0

我试图将 JS 中的 css 编辑器作为 jquery 插件。到目前为止，我设法制作了静态荧光笔。“那个”是$（可编辑的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);
        });

现在我想让它在打字时突出显示。我注册了按键事件，确定哪个“范围”是用户（选择器，正文（规则，值））并相应地包装书面字符。问题是可编辑 div 中的插入符号位置。例如。当用户点击

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

并写一些东西，我阻止该事件，<span class='rule'>{new_character}在此之后插入，光标（插入符号）位置是上次的位置。我尝试了一些用于插入符号操作的 jquery 插件，但没有任何效果......我不确定这是不是这个好方法，你会怎么做才能让 live highliter 工作？

4

0 回答 0