标签: draftjs

我正在使用Draft.js来实现文本编辑器.我想将编辑器的内容保存到数据库中,然后将其检索并再次将其注入编辑器,例如重新访问编辑器页面时.

首先,这些是相关的进口

import { ContentState, EditorState, convertToRaw, convertFromRaw } from 'draft-js';

我如何将数据保存到数据库(位于父组件中)

saveBlogPostToStore(blogPost) {
    const JSBlogPost = { ...blogPost, content: convertToRaw(blogPost.content.getCurrentContent())};
    this.props.dispatch(blogActions.saveBlogPostToStore(JSBlogPost));
}

现在,当我检查数据库时,我得到以下对象:

[{"_id":null,"url":"2016-8-17-sample-title","title":"Sample Title","date":"2016-09-17T14:57:54.649Z","content":{"blocks":[{"key":"4ads4","text":"Sample Text Block","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[]}]},"author":"Lukas Gisder-Dubé","__v":0,"tags":[]}]

到目前为止我觉得很好,我尝试了一些其他的东西,数据库中的对象肯定是转换的.例如,当我在不调用convertToRaw()方法的情况下保存内容时,还有更多字段.

将数据设置为新的EditorState

要从数据库中检索数据并将其设置为EditorState,我也尝试了很多.以下是我最好的猜测:

constructor(props) {
    super(props);
    const DBEditorState = this.props.blogPost.content;
    console.log(DBEditorState); // logs the same Object as above
    this.state = { ...this.props.blogPost, content: EditorState.createWithContent(
        convertFromRaw(DBEditorState)
    )};
}

渲染组件时,我收到以下错误:

convertFromRawToDraftState.js:38 Uncaught TypeError: Cannot convert undefined or null to object

任何帮助是极大的赞赏!

我正在尝试实现一个DraftJS编辑器,该编辑器在录制的音频正在播放时突出显示转录中的单词(有点像卡拉OK).

我收到以下格式的数据:

[
  {
    transcript: "This is the first block",
    timestamps: [0, 1, 2.5, 3.2, 4.1, 5],
  },
  {
    transcript: "This is the second block. Let's sync the audio with the words",
    timestamps: [6, 7, 8.2, 9, 10, 11.3, 12, 13, 14, 15, 16, 17.2],
  },
  ...
]

然后我将这些接收到的数据映射到ContentBlocks并ContentState使用它们 初始化编辑器ContentState.createFromBlockArray(blocks)

似乎存储时间戳元数据的"DraftJS"方式是Entity为每个单词创建一个具有相应时间戳的内容,然后currentContent在音频播放时进行扫描并突出显示直到当前经过时间的实体.但我不确定这是否是正确的方法,因为它似乎不适合大型转录.

注意:在保持此卡拉OK功能的同时,成绩单需要保持可编辑状态

任何帮助或讨论表示赞赏!

是否有文档说明了将内容粘贴到draft.js时如何保留分段符？其他格式化看起来很合理,但所有段落块在粘贴时都会折叠成一个段落块.

如何限制草稿js中的最大字符？

我可以像这样得到状态的长度,但是如何停止更新组件？

var length = editorState.getCurrentContent().getPlainText('').length;

您好，我正在尝试创建一个 React contenteditable div 组件，它的工作方式类似于输入字段，但具有一些我想要实现的附加功能，但由于功能很少，我想自己实现它，而不是使用 slatejs 或Draftjs 做了这么多繁重的工作。

我的想法是我应该有一个受控的 contenteditable div，我可以监听插入一些文本的事件。（就像反应控制组件的一般思想）

它看起来很简单。我应该监听 keydown 事件，并且在每个事件上我只需将相应的字符（event.key）插入到我的状态中。但是我发现在带有触摸键盘的移动设备上，此值（event.key）始终为“无法识别”。

有时输入事件也有一个“数据”属性来确定插入的值。但在触摸键盘中，该事件没有“数据”属性。

所以我的问题是我们如何才能以在桌面和移动设备上全局工作的方式插入字符？Draftjs 和 slatejs 作者如何检测插入的字符（即使在触摸移动设备上）并更新其状态？

如何测试draftjs编辑器的内容是否为空？

我现在唯一的想法是对这个函数返回的对象进行对象比较: EditorState.createEmpty().getCurrentContent()

我按照draft-js文档创建了一个非常简单的draft-js演示.

一切似乎都运行良好,但是当我在Chrome中打开网址时,我只能看到一个白色的空白页面(那里有一个隐藏的编辑器组件但是不可见)

浏览器的控制台没有错误.

演示项目在这里:https://github.com/js-demos/react-draft-js-demo,您可以克隆它并按照自述文件运行它.

我仔细检查了代码,但无法弄清楚原因.

根据我的问题，我想删除一些默认的工具栏选项，例如字体系列或表情符号，并仅保留文本样式选项。怎么做 ？

对于我的编辑来说。

<Editor
    editorState={editorState}
    wrapperClassName="demo-wrapper"
    onEditorStateChange={this.onEditorStateChange}
    toolbar={{
        inline: { inDropdown: true },
        list: { inDropdown: true },
        textAlign: { inDropdown: true },
        link: { inDropdown: true },
        history: { inDropdown: true },
    }}
/>

我在实现React Draft Wysiwyg时遇到问题，字体、大小、粗体和其他下拉选项不起作用

这是我的代码

import React, { useState } from 'react'
import { Editor } from 'react-draft-wysiwyg'
import { EditorState } from 'draft-js'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'


export const HTMLEditor: React.FC = (): JSX.Element => {
  const [editorState, setEditorState] = useState(() => EditorState.createEmpty())


return (
    <div className="mt-2 mb-2">
      <Editor
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorState={editorState}
        onEditorStateChange={setEditorState}
        toolbar={{
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true },
        }} …

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

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

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

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