我正在使用 TinyMCE 让用户编辑和格式化文本，输出是 html 代码。然后将 html 发送到服务器并推送到可以跟踪网页上的编辑进度的其他客户端，将 html 插入到 div 中，以便用户可以看到格式但他们无法编辑。
现在，我希望光标位置和用户在编辑器中所做的任何选择都显示在只读页面上，如果选中，则使用突出显示（背景颜色）或在字符之间插入带有黑色边框的空范围来模仿光标位置。
我尝试使用 editor.tinymce().selection.getRng() 它给了我用户看到的开始和结束位置（格式化字符不计算在内）然后我遍历 DOM 并计算每个文本元素包装中的字符用突出显示跨度选择的那些。这导致代码混乱，但工作得很好，直到我在文本块中遇到非 ascii 或编码字符。
示例 html
<p>abc <b>de</b>fg</p>
对用户来说是这样的
abc de fg
假设用户选择了字符 c 到 d（选择包括 c、空白、粗体标签的前半部分和 d），tinymce 将返回范围 start:2 end:5 但后面的实际字符将是 start:5 end:16。仅将字符 5 到 16 的文本包装在突出显示范围内将导致 html 错误。检查以 & 开头和以 ; 结尾的单词 增加职位数量会变得一团糟。必须有一个更简单的方法
如何计算一组 html 字符将变成多少个“可见”字符？
或者也许你会以另一种方式解决问题
谢谢
PS 1 我研究了各种 jquery 高亮插件，但它们似乎是基于搜索字符串高亮显示的。这些在用户选择一个字符并且该字符多次存在的情况下不起作用，然后它们将突出显示所有出现。