表情符号在 contentEditable 中重新渲染后变成问号

Question

我创建了一个简单的文本编辑器，还创建了添加表情符号的可能性。问题是，当我单击一个表情符号时，表情符号被添加并可见，但之前存在的表情符号被问号替换。我的 contentEditable div 是受控的，这意味着无论何时添加表情符号都会导致重新呈现。我的算法在以下情况下遇到了这个问题：

childValue = childValue.substring(0, caretPosition) + emoji + childValue.substring(caretPosition + 1, childValue.length)

childValue 不是状态变量，它的值用于更新常量变量，该变量将用于更新表示 contentEditable 的 dangerouslySetInnerHTML 属性的状态变量， caretPosition 完美。

知道我为什么会遇到这个问题吗？

Answer 1

这个来自的解决方案结合 HTML 转义应该可以解决问题：

var p = document.querySelector("p");
var childValue = "Some sample text";
var caretPosition = 5;
var emoji = "";

const emojiToString = (emoji) => 
  ` &#x${emoji.codePointAt(0).toString(16)}; `;

childValue = 
  childValue.substring(0, caretPosition) + emojiToString(emoji) +
  childValue.substring(caretPosition, childValue.length);

p.innerHTML = childValue;

<p></p>

Answer 2

我解决了这个问题。我发现 'substring' 把一切都搞砸了，所以我做了以下事情：

newChildValue = Array.from(childValue);

childValue = newChildValue.slice(0, caretPosition).join('') + emoji + newChildValue.slice(caretPosition).join('');

这样我就避免使用 'substring'，因为 Array.from(str) 将字符串拆分为单独的 unicode 字符，而不会在字节之间打断它们。

表情符号在 contentEditable 中重新渲染后变成问号

Emojis become question marks after re-render in contentEditable

contenteditable

jsx

emoji

reactjs