reactjs - DraftJS Modifier.insertText() : Insert Unicode

标签 reactjs draftjs emojione

我有表情符号列表。他们每个人都有自己的unicode。使用 Modifier.insertText(),我想将它们插入到文本中。

_addEmoji(text) {
    const { editorState } = this.state;
    const selection = editorState.getSelection();
    const contentState = editorState.getCurrentContent();
    const txt = '&#x' + text + ';';
    let nextEditorState = EditorState.createEmpty();
    if (selection.isCollapsed()) {
      const nextContentState = Modifier.insertText(contentState, selection, txt);
      nextEditorState = EditorState.push(
        editorState,
        nextContentState,
        'insert-characters'
      );
    } else {
      const nextContentState = Modifier.replaceText(contentState, selection, text);
      nextEditorState = EditorState.push(
        editorState,
        nextContentState,
        'insert-characters'
      );
    }
    this.onChange(nextEditorState);
  }

我希望看到 😄 插入到编辑器中,但它显示行 😄反而。

我已插入<meta charset="utf-8" /><head />并且表情符号列表完美呈现。主要问题是 Draftjs 编辑器显示原始 unicode 而不是表情符号。

有什么想法可以解决这个问题吗?谢谢。

最佳答案

因为 insertText 会将您的 & 解析为 HTML 编码的 &

您应该直接在此处键入字符,或使用String.fromCharCode

例如:

Modifier.insertText(contentState, selection, 😄);

Modifier.insertText(contentState, selection, String.fromCharCode(0xd83d, 0xde04));

原因

'😄'.charCodeAt(0).toString(16); //d83d
'😄'.charCodeAt(1).toString(16); //de04

关于reactjs - DraftJS Modifier.insertText() : Insert Unicode,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40168161/

相关文章:

javascript - Reactjs material ui textfield number max 和 min

javascript - 如何传递数组并在 React Lifecycle 中访问它

twitter-bootstrap - react Bootstrap Accordion 不与 map 折叠

javascript - 草稿-js : auto line break

javascript - DraftJS 触发焦点内容更改?

draftjs - 如何创建一个新的 DraftInlineStyle?

javascript - 当集成到我的博客中时,Emoji One 显得过大

reactjs - i18next 警告或检查缺少语言的键(不是 fallbackLng)

vue.js - 在 VueJs 应用程序中实现表情符号

javascript - 无法对动态加载的元素应用 jquery 函数