标签: draftjs

我试图只在contentState本身发生变化时才运行函数,而不仅仅是editorState.

我现在的想法是将旧的contentState存储为字符串,并将其作为字符串与新的contentState进行比较,但将状态转换为字符串并进行比较似乎非常浪费.有没有更好的办法？

在不改变SelectionState的情况下,将一个空的无格式块添加到Draft.js编辑器的最佳方法是什么？

我有表情符号列表。他们每个人都有自己的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);
  }

我希望看到

我正在学习 React：完全是新手。

如果我直接从 Draft.js 将 HTML 保存在 DB 中（或者它的变体总是基于它），然后在我的 React SPA 的视图页面中，我会通过我的 API 从 DB 检索 HTML：

问题：

• 我怎样才能呈现那个 HTML？

• 危险地SetInnerHTML？或者也许是其中之一（你有什么建议？）？

  • https://github.com/wrakky/react-html-parser
  • https://github.com/pveyes/htmr
  • https://github.com/remarkablemark/html-react-parser
  • https://github.com/utatti/react-render-html
  • https://github.com/aknuds1/html-to-react

• 我读过诸如“消毒”、“保护 HTML”之类的词。但是，怎么会有图书馆？

• 当我将它保存在 DB 中或之后，当我渲染它时，我需要保护来自 Draft-js 的 html 吗？

我正在做自动化测试，我需要在文本字段中输入文本，但问题是没有“输入”来执行此操作。

这个不行：

document.querySelector([class*=modal-dialog] [class*=AddCitation_] [class*='DraftEditorPlaceholder']).value='Hello World'

有谁知道如何在draft.js中输入文本？

我正在努力使实体样式以我希望使用draft-js的方式工作。我通过在自动完成组件中选择项目来将样式化的实体添加到输入中。当我选择一个时，它会起作用，但插入符号会留在实体中，直到我添加另一个角色为止。有没有一种方法可以将插入符号移动到实际实体之后而不添加空格？

我正在使用一个名为的库draft-js-autocomplete，如果需要的话，我不介意发出请求请求。

为了显示：

我有一个编辑器，它应该有带有 props 的实体name, color, start, end。在编辑器中，由start和表示的位置中的文本end将由 替代name，并将由带有 的自定义组件呈现contentEditable=false。

这通常适用于 Draftjs，但有几个问题：

• 当用键盘箭头移动光标时，实体被跳过，这很好。但是，当一个实体位于输入的最后并且我尝试向右移动经过它时（仅使用右箭头或使用选项或 cmd + 右），光标消失并且当我再次向左移动时不会回来。
• 如果我向右转到实体的左侧并按 shift + option + 向右箭头，则会按预期选择该实体。但是如果我再按向左箭头，光标也会丢失。

我可以通过确保在最后一个实体之后总是有一个空格来解决这个问题，但这似乎很棘手，并且可能有边缘情况。

另一种选择是不使用contentEditable=false，但这会给我的实际应用程序带来其他问题，它有一个更复杂的实体组件，包括下拉列表，我将不得不手动确保用户无法更改实体内的文本等。

以下是该问题的重现：https : //codesandbox.io/s/competent-surf-st77i

有任何想法吗？

这里提出了类似的问题：Uncaught ReferenceError: global is not Define at Object../node_modules/fbjs/lib/setImmediate.js

这个问题有两个答案，似乎都有信心能够解决它。对我来说，问题是——没有给出如何实现答案的解释。

基本上，我有一个包含 React 的电子应用程序，一切正常，直到我尝试将 Draft.js 实现到项目中。我收到以下错误：

app.js:19805 Uncaught ReferenceError: global is not defined

该日志将我指向 babel/webpack 编译的 app.js 中的一行：

module.exports = global.setImmediate;

导致它的具体原因被缩小到导入语句：

import {Editor, EditorState} from 'draft-js';

上面链接问题的答案之一是在窗口上添加一个全局对象：

(window as any).global = window;

我不明白的是……这是什么意思？在我的 main.js 文件中，我创建窗口（它只是整个应用程序的一个窗口），尝试执行此操作似乎无论我在哪里尝试执行此操作都会引发错误，而且我似乎找不到任何参考根本无法定义“全球”。我应该在哪里定义“全球”？

我正在使用react-draft-wysiwyg 编辑器，它构建在Draft.js 之上。我试图弄清楚如何以编程方式插入 HTML，例如：

<h1>Hey</h1>

到目前为止，我得到的最接近的是使用 Modifier 模块的 insertText() 方法。例子：

insert = ()=>{
  const editorState = this.state.editorState;

  const selection = editorState.getSelection();

  const contentState = editorState.getCurrentContent();

  const ncs = Modifier.insertText(contentState, selection, "<h1>Hey</h1>",);

  const es = EditorState.push(editorState, ncs, 'insert-fragment');

  this.setState({editorState: es})
}

这会导致插入文字字符串，而不是 HTML H1 元素。

如何做呢？

我正在尝试使用 DraftJS 创建一个编辑器，它将编辑器字段中的关联值呈现给 guid，这些值将包含在编辑器的实际字符串值中。我遇到的问题是，当我尝试在装饰器中渲染关联值而不是实际值时，编辑器开始表现得很奇怪。

示例：如果我在商店中有一个带有guid:1234和 的对象value:"example value"，如果编辑器的值为hi there {1234}我希望它通过 guid 查找对象的名称并渲染hi there <span>example value</span>..但是当我让装饰器渲染包含名称的范围时与正则表达式匹配的 GUID 的编辑器焦点开始向后跳跃。我注意到在装饰器中不渲染 {props.children} 是导致此问题的唯一原因。

这是我尝试过的...

/*This doesn't work: 
Rendering {tokenName} causes the Editor's focus to jump backwards 
when the new <span> gets inserted
*/

const TokenSpan = (props) => {
    let tokenGuid = props.decoratedText;
    let tokenName = getTokenNameById(tokenGuid);
    return (
        <span
            className={styles.token}
            data-offset-key={props.offsetKey}
        >
            {tokenName}
        </span>
    );
};

/* This does work, but I don't want to render …