javascript - 通过 javascript 编辑内容后，将插入符位置保持在 contenteditable

Question

我有一个 contenteditable div，它的内容在每次文本更改(textchange.js)后通过 javascript 进行编辑，例如添加 html 标签(仅用于更改某些单词颜色的 span 标签)并在此处添加或删除一些空格和在那里，但我的问题是，由于内容在用户编辑时被更改，插入符号在每次按键后都会改变其位置，这使得几乎不可能写一个字。我目前正在寻找一种方法来防止这种跳跃，我已经考虑过添加一个特殊的字符，在编辑它之前，它不会被用作插入符号位置的一种标记，删除它完成后将插入符放回这个位置，但由于我经常使用正则表达式(目前每次文本更改后大约使用 25 次)这个特殊字符几乎会毁掉它们中的每一个，我将不得不添加类似 \x40? 任何地方，看起来一点都不好看和清晰:

/\s<span class="b0">hello\sworld</span>/g

到:

/\s\x40?<span class="b0">\x40?h\x40?e\x40?l\x40?l\x40?o\x40?\s\x40?w\x40?o\x40?r\x40?l\x40?d\x40?</span>/g

我不知道它是否有帮助，但这里有一个内容如何改变的例子(每次按键后):

foo +++   <span class="c3">bar</span> - baz -<span class="c0">qux</span>

到:

<span class="c1">foo</span> + <span class="c3">bar</span> - <span class="c1">baz</span> * <span class="c0">qux</span>

如果有关于如何解决这个问题的任何建议、提示或暗示，或者有更好的方法来做这个标记事情，我将不胜感激。

谢谢你:)

Answer 1

可能这不是最好的解决方案，但我创建了 2 个 div，一个用于显示文本，另一个用于编辑文本，第二个位于第一个之上，并具有一定程度的透明度。

像这样:

<div style="position: absolute; left: 48px; top: 16px;" unselectable="on" onselectstart="return false">
    <code id="code_show">Type here.</code>
</div>
<div style="position: absolute; left: 48px; top: 16px;">
    <span style="opacity:0.33"><code id="code_area" contenteditable="true" onkeyup="colorize();">Type here.</code></span>
</div>

onselectstart="return false" 和 unselectable="on" 确保第一个不可选择。 onkeyup="colorize();" 确保每次用户按下键编辑文本时调用 javascript 函数 colorize。

因此您必须定义它来更新 code_show 的内容以匹配 code_area 中的内容，但颜色。

例如，这段代码将每个单词都涂成红色:

<script>
function colorize(){
    var code_area= document.getElementById('code_area');
    var code_show= document.getElementById('code_show');

    var inner= code_area.innerHTML;
    inner= inner.replace(/RED/g,"<span style=\"color: red\">RED</span>");
    code_show.innerHTML= inner;
}
</script>