- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 lexcal 的新手,我正在开发用于语音到文本的注释工具。
我用过 draftjs。我使用实体和装饰器来存储和管理每个单词的元数据。每个单词都是实体,每个实体都有时间戳作为元数据。
例子:我有一只猫
“我”、“有”、“一个”、“猫”是实体。
猫的实体数据是这样的
offset: 12,
length: 5,
data: {
original_word: 'cat',
start: 4.2,
end: 4,6,
}
所以当用户选择一个单词并将单词 cat 修改为 kitten 时,我仍然可以获得开始和结束时间戳。
你认为我可以用词法开发类似的东西吗?
当用户一次删除多个单词时,元数据中断是可以的……不需要完美,因为我迟早需要从 draftjs 迁移到某个编辑器库……
提前致谢。
最佳答案
方法:
如果我正确理解你的问题,那是首选方法。
editor.registerUpdateListener(({editorState, previousEditorState, dirtyLeaves, dirtyNodes}) => {
// You can diff editor state and each of the individual nodes that
// were modified (dirtyLeaves and dirtyNodes)
});
请注意,一个 TextNode 可能包含多个单词。
权衡:
(+) 很整洁。它适用于现有的词法节点,并且不会修改渲染的 DOM。
(-) 差异节点可能很复杂。
就像 MentionNode 一样,您可以拥有一个拥有自己数据的实体节点。
class MarkedNode extends TextNode {
__timestamps: {...};
setTimestamps() { this.getWritable().__timestamps = ... }
getTimestamps() { return this.__timestamps; }
}
权衡:
(+) 用标记节点替换每个单词很容易。
(-) 用您自己的自定义节点替换 TextNode 会终止围绕 TextNode 的所有优化,这些优化当前是协调器的一部分(合并相邻的文本节点)。拥有多个单独的 span 也会导致可访问性问题或其他外部插件(如 Grammarly)行为不当,并且还会降低其他依赖 TextNode 的插件的功效。
就像以前的方法一样,但不是替换 TextNode,而是在顶部创建自己的包装器(元素)节点。鉴于基于字符的差异比较复杂且缓慢,这就是我们为 CommentPlugin 所采用的方法。 .
权衡:
(+) 添加自定义包装器节点很容易。
(-) 它仍然会对应用程序的整体性能产生负面影响。总的来说,它比以前的方法更好,因为您没有重写 TextNode 但也有大部分缺点。
首先,一个TextNode可以包含多个单词。 TextNode 上的标记可能引用 1 个以上的单词。
除此之外,在 TextNode 上允许任意元数据意味着以后很难进行优化。例如,在合并节点时,我们查看它们的属性,并且仅在它们共享所有属性(模式、细节、样式等)时才合并它们。为了保持这种优化,我们必须建立规则来确定是否确实可以合并两个 TextNodes 节点。
关于draftjs - 我们可以在每个单词上存储元数据,让用户修改它并仍然保留它吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72283050/
我们有一个 Figure 装饰器,它允许我们插入一个链接,您可以将鼠标悬停在该链接上以预览图像。我们使用模态形式插入此图像以及一些元数据(标题等)。这一切都很好。但是,我们还希望能够单击链接并弹出模式
我是 lexcal 的新手,我正在开发用于语音到文本的注释工具。 我用过 draftjs。我使用实体和装饰器来存储和管理每个单词的元数据。每个单词都是实体,每个实体都有时间戳作为元数据。 例子:我有一
我尝试使用 Modifier.insertText 创建一个新状态,第三个参数应该是 draftInlineStyle let ncs = Modifier.insertText(contentSta
伙计们!请帮忙。 我要的是:从新行开始时,用户键入 URL 并按 Enter我想删除包含 URL 的块并将其替换为自定义 Entity .很像文档中的媒体示例,但没有 Add image按钮。 我试过
偶然发现了这个很酷的文本编辑器,draft.js通过 Facebook 。我尝试按照 Github 中的示例进行操作,但我想创建一个包含内容的编辑器而不是空编辑器。 var EditorState =
我正在使用 draftjs 创建富文本编辑器并且找不到任何资源来帮助我解决问题。 请先查看codesandbox . 您可以看到包含链接的文本(testtest 为红色)。如果单击它,您将在表格中看到
我在页面上有一个编辑器和 save 按钮。我希望 save 按钮仅在有更改时出现(自上次保存以来)。因此,当您保存时,我设置了 this.setState({hasChanges: false}) 并
我有一个表单,其中包括电子邮件的来源、主题和文本,该表单使用富文本编辑器的草稿。我可以验证其他字段,但我如何验证 draftjs 编辑器。当我点击编辑器输入时,如果它留空,它应该显示错误,否则成功,就
当将 word 或其他来源的文本粘贴到 Draftjs 中时,格式随之而来,我尝试像这样剥离样式数据: onChange={(newEditorState) => {
如何添加链接?我知道如何添加链接到 选择 const contentState = editorState.getCurrentContent();
我试图在初始化时用一些 HTML 内容填充 Draft.js 0.10.0 编辑器。问题是任何没有文本的 HTML 块元素都不会转换为 ContentBlocks。所以所有来自换行符的额外间距都被删除
我有一个由 Draft.js 提供的编辑器的包装器,我想让 tab/shift-tab 键像它们应该用于 UL 和 OL 一样工作。我定义了以下方法: _onChange(editorState)
我正在尝试使用 Modifier.removeRange 从 Draftjs 编辑器中删除原子 block 。据我所知,我传递了所有正确的参数,但要删除的 SelectionState 永远不会被删除
运行完 convertToRaw(editorState.getCurrentContent()) 后,我将 DraftJS 编辑器的内容作为 JSON 字符串存储在数据库中。 。 数据库中存储内容的
在草稿中实现自定义 block 的最简单方法是什么?目前我正在将此函数用于默认 block editorToggleBlockType = (blockType) => { this.on
我正在尝试让一个简单的撤消和重做按钮开始工作。到目前为止,我已经尝试通读 draftjs 网站上的文档,但感觉很晦涩,而且没有任何示例说明我正在尝试做什么。 这是我到目前为止尝试过的,点击撤消它什么也
我很好奇我们是否可以定义自己的 block 类型而不是使用来自 DRAFTBLOCKTYPE 的 block 类型. 目前我正在玩 draft-wysiwyg它使用名为 draft-image-plu
我正在使用这个在编辑器中插入一些文本: _insertText(text) { const { editorState, onChange } = this.props const n
有一些纯文本内容需要插入到存在的textEditor中,我尝试使用EditorState.push方法,我认为它适用于这种情况。我尝试这样的事情: const { ContentState: { cr
我已经尝试过基本的软件包,但我似乎不明白发生了什么, 这是我尝试过的; const { convertFromHTML, ContentState } = require('draft-js'
我是一名优秀的程序员,十分优秀!