标签: draftjs

是否有"正确的方法"来检测我是否失去了Draft.js编辑器的焦点？

用例是,如果用户点击其他地方,我想要"退出编辑器模式",这意味着我切换编辑器的readOnly prop.我怎样才能理想地做到这一点并且做到这一点是个好主意(你有没有看到问题)？

我在页面和save按钮上有一个编辑器。我希望save按钮仅在有更改时出现（自上次保存以来）。因此，当您保存时，我设置this.setState({hasChanges: false})并在onChange功能中设置hasChanges为true.

这一切正常。问题是编辑器将onChange在编辑器获得焦点时触发事件（但内容尚未更改）。而且，根据他们的文档，这是预期的行为

组件内的事件侦听器将观察焦点更改并按预期通过 onChange 传播它们，因此状态和 DOM 将保持正确同步。

有没有办法知道内容是否在onChange方法内部发生了变化，或者只有选择发生了变化？

我正在使用 Facebookdraft-js来创建所见即所得。我正在尝试使用本机 .html 将 HTML 转换为 editorState convertFromHtml。但它无法识别img标签。

import draftJs from 'draft-js'
const blocksFromHTML = convertFromHTML("<img src='some/img.png' />", draftJs.getSafeBodyFromHTML, draftJs.DefaultDraftBlockRenderMap);
const contentState = draftJs.ContentState.createFromBlockArray(blocksFromHTML);
editorState = draftJs.EditorState.createWithContent(contentState);

这样做会完全删除图像。有任何想法吗？

？fireEvent.change()只是不起作用。

它说元素上没有设置器。

我尝试改用咏叹调选择器

const DraftEditor = getByRole('textbox')
DraftEditor.value ='something';
fireEvent.change(DraftEditor);

我再次尝试使用查询选择器

const DraftEditor = container.querySelector('.public-DraftEditor-content'));

改为尝试键盘事件。

没有。

有没有人设法使用draftjs 和反应测试库发送富文本输入文本？

我有一个由 Draft.js 提供的编辑器的包装器，我想让 tab/shift-tab 键像它们应该用于 UL 和 OL 一样工作。我定义了以下方法：

  _onChange(editorState) {
    this.setState({editorState});
    if (this.props.onChange) {
      this.props.onChange(
        new CustomEvent('chimpeditor_update',
          {
            detail: stateToHTML(editorState.getCurrentContent())
          })
      );
    }
  }

  _onTab(event) {
    console.log('onTab');
    this._onChange(RichUtils.onTab(event, this.state.editorState, 6));
  }

在这里，我有一个方法 ，_onTab它连接到Editor.onTab我调用的RichUtil.onTab()，我假设它返回更新的EditorState，然后我将其传递给更新 EditorState 并调用一些回调的通用方法。但是，当我点击 tab 或 shift-tab 时，什么也没有发生。

我是 Draft-JS 的新手，能够为我的消费创建一个足够体面的文本编辑器，但我需要通过编码在我的 Textarea 底部添加一个带有 LI 项目的 UL 列表。

我曾尝试使用导入 HTML，然后将我的 HTML 添加到其中，然后将其导出回编辑器状态，但撤消和重做不能像这样工作。我可能听起来很奇怪，但您的帮助将不胜感激，因为我无法找到 Draft-JS 的好资源

我目前正在使用的添加 html 的代码是：

  let currentHTML = stateToHTML(this.state.editorState.getCurrentContent());
  currentHTML =   currentHTML + "<li>" + value +"</li>"
  let contentState = stateFromHTML(currentHTML);
  this.setState({editorState : editorState.createWithContent(contentState)});

在上面的代码中，我从编辑器状态中获取 html，然后附加所需的 html 字符串并从 html 重新生成内容状态并编辑编辑器状态。谢谢你..

我目前正在构建一个类似于 medium.com 上使用的编辑器。对于每个unstyled块，我渲染一个自定义组件，其中包含编辑按钮以更改该部分的块类型。

但是，例如，当我将部分更改为 aheader-one并点击返回按钮时，新块也是一个header-one块。我喜欢看到新块unstyled而不是前一个块的相同类型。

关于如何做到这一点的任何想法？

编辑

经过更多的搜索和尝试，我自己找到了解决方案！似乎最好的方法是在split-blockkeyCommand 被触发时插入一个新块。示例代码如下：

createEmptyBlock(editorState: Draft.EditorState) {
    const newBlock = new Draft.ContentBlock({
        key: Draft.genKey(),
        type: "unstyled",
        text: "",
        characterList: Immutable.List()
    })

    const contentState = editorState.getCurrentContent()
    const newBlockMap = contentState.getBlockMap().set(newBlock.getKey(), newBlock)

    return Draft.EditorState.push(
        editorState,
        Draft.ContentState
            .createFromBlockArray(newBlockMap.toArray())
            .set('selectionAfter', contentState.getSelectionAfter().merge({
                anchorKey: newBlock.getKey(),
                anchorOffset: 0,
                focusKey: newBlock.getKey(),
                focusOffset: 0,
                isBackward: false,
            })) as Draft.ContentState,
        "split-block"
    )
}

有没有办法用 DraftJS 或任何插件创建表格？

允许用户输入自定义 HTML（具有表格支持）的插件就足够了。

据我了解，插件可以呈现为表格，但我需要能够编辑表格，例如设置列数，在每个单元格中输入文本等。

如果行/列数需要在创建时指定并且之后无法编辑，则可以接受，只要单元格可以单独填充/更新即可。

我正在开发一个需要将文本插入contenteditable="true"div的应用程序（Draftjs准确地说是基于文本字段）。

现在我知道 Draft.js 使用 react 并且应该以这种方式使用它，但在这种情况下，该应用程序已经存在并且这是一个与之配合使用的第三方电子应用程序。

我正在 macOS 上处理在线通知回复，因此我需要将该回复文本粘贴到 DraftJS 字段中，但是，当我这样做时，使用：

document.querySelector('div[contenteditable="true"]').focus();
document.execCommand('insertText', false, 'message');

它抛出一个错误：

我能够使用以下方法使其工作：

const event = document.createEvent('TextEvent');
event.initTextEvent('textInput', true, true, window, 'message', 0, locale);

但如果消息包含表情符号，则此 API 已弃用且无法正常工作。

有没有办法做到这一点，不会导致错误？我发现应该替换 initTextEvent 的新 API 只是new Event()（参见文档），但我不知道它是否支持 textInput 事件。

要使用它，您可以访问https://draftjs.org/并在 chrome 开发工具中使用它。

我真的很感激这里的一些帮助，因为我不知道该怎么做才能让它继续工作。另外，我知道人们是 jquery 的粉丝，但我更喜欢原生 js 解决方案（尽管欢迎任何解决方案）。

编辑：

请注意：我没有使用 react，我想修改的输入字段 (draftjs) 使用的是 react，我想使用原生 js 向其中输入文本。

编辑2：

对于遇到此问题的其他人，我想将文本插入 Facebook 信使文本字段（使用 Draftjs）。

我设法找到了一个可行的解决方法。它确实使用了已弃用的 API ( event.initTextEvent)，但这是我发现的唯一有效方法，即使使用表情符号也是如此。如果您对此有更好的解决方案，请发布答案。 它是这样工作的：

async function sendReply(message: …

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

这个不行：

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

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