draft.js和装饰器的文本选择错误

draft.js是一个用于构建富文本编辑器的JavaScript库。它提供了一套强大的API，使开发人员能够轻松地创建可定制的富文本编辑器。draft.js具有以下特点：

概念：draft.js是一个基于React的富文本编辑器框架，它将文本编辑器的状态抽象为一个可变的数据结构，称为EditorState。通过使用EditorState，可以轻松地管理文本编辑器的内容、样式和光标位置等。
分类：draft.js可以被归类为前端开发工具，特别适用于构建需要富文本编辑功能的应用程序。
优势：draft.js具有以下优势：
- 灵活性：draft.js提供了丰富的API和插件系统，使开发人员能够根据自己的需求定制编辑器的功能和外观。
- 可扩展性：通过使用插件系统，可以轻松地扩展draft.js的功能，例如添加自定义的样式、快捷键和命令等。
- 高性能：draft.js采用了虚拟DOM和优化的渲染机制，以提供快速且流畅的编辑体验。
- 跨浏览器兼容性：draft.js支持主流的现代浏览器，并提供了一致的编辑体验。

应用场景：draft.js适用于各种需要富文本编辑功能的应用场景，例如博客编辑器、内容管理系统、在线文档编辑器等。
推荐的腾讯云相关产品：腾讯云提供了一系列与前端开发和云计算相关的产品和服务，其中与draft.js相关的产品包括：
- 腾讯云对象存储（COS）：用于存储和管理富文本编辑器中的图片、附件等资源文件。产品介绍链接：https://cloud.tencent.com/product/cos
- 腾讯云CDN：用于加速富文本编辑器中的静态资源加载，提供更好的用户体验。产品介绍链接：https://cloud.tencent.com/product/cdn

通过使用draft.js和腾讯云相关产品，开发人员可以构建功能强大且可扩展的富文本编辑器，并借助腾讯云的存储和加速服务，提供更好的用户体验。

draft.js和装饰器的文本选择错误

javascript、draftjs

我以这样一种方式使用draft.js编辑器，需要更新装饰器以及它在onChange中动态呈现的组件的属性。这将使用背景色标记文本的某些部分。我几乎可以让它工作，但是有一个奇怪的bug，其中有一个奇怪的bug，它不可能选择紧跟在一个装饰组件之后的字符。Editor editorState={editorState} onChange={this.handleChan

浏览 27提问于2019-02-16得票数 0

回答已采纳

1回答

在装饰器上选择Draft.js装饰器onClick中的文本以实现拖放

javascript、reactjs、contenteditable、draftjs

我正在尝试实现一种功能，允许我在Draft.js编辑器中拖动修饰文本，并在这个问题上花费了几天的脑力。代码我

浏览 1提问于2020-12-21得票数 4

回答已采纳

1回答

如何在TextEditor中获取当前键入的文本，并在draftjs中提供自动完成(如提及或hashtag

reactjs、draftjs、draft-js-plugins

如何在文本编辑器中获取当前键入的文本，并在draftjs中提供自动完成功能，如提及或hashtag我试着在编辑器之外的单独输入栏上启用自动补全功能，所以他们是在draftjs中实现自动完成(给出下拉)的更好的方法吗？

浏览 6提问于2019-11-07得票数 2

1回答

React WYSWYG点赞github评论

reactjs、wysiwyg

在react中实现WYSWYG的最简单方法是什么，它可以像我们在stackoverflow上一样支持格式化，我们可以很容易地格式化代码块，或者更好地像我们在medium站点上看到的那样？

浏览 8提问于2019-05-27得票数 0

回答已采纳

1回答

如何显示包含超链接的Draft.js数据？

hyperlink、draftjs

使用draft.js创建编辑器。当它包含链接标签时，在显示时会遇到问题。没有链接标签，它工作得很好。我关注了this博客来实现抓取功能。将数据保存在本地存储中以进行测试。className="App"> </div> ); 粗体和斜体样式显示正确

浏览 29提问于2019-10-16得票数 1

1回答

从draft.js / /Draftail中的选择中创建一个新实体，包装现有文本和链接实体

javascript、reactjs、wagtail、draftjs

我试图为Wagtail的Draftail文本编辑器(基于draft.js)创建一个新的实体。我从下面的示例开始：但是，我需要能够保存现有的link实体，使它们成为新的footnote实体的子实体。我尝试过各种代码组合(包括draft.js CompositeDecorator)，但无法使其工作。onComplete } = thi

浏览 1提问于2019-06-07得票数 0

1回答

不带浏览器的Draft.js转换

javascript、draftjs

我正在将一些保存下来的编辑器文本/数据从另一个富文本编辑器(Quill)迁移到使用Draft.js。数据以当前文本编辑器可消化的格式存在于文件中，我希望将这些文件转换为Draft.js格式。所有的富文本编辑器都有某种类型的数据到html和html到数据的转换函数，这些函数在这里很有用。我的计划是使用当

浏览 18提问于2022-01-05得票数 0

1回答

如何在draftjs中实现自定义装饰器

reactjs、draftjs

我正在尝试为我的draft.js组件实现一个自定义装饰器。我不想使用CompositeDecorator，因为我想根据输入呈现许多不同类型的装饰。我目前使用的装饰器可以在下面找到。目前，当我在#后面输入一个字符(例如#a)时，即当装饰器被触发时，文本确实变得粗体，但焦点移到了文本区的开头，之后它的行为非常不可预测。d-kozak

浏览 36提问于2019-04-02得票数 3

2回答

如何在slatejs中生成自定义密钥？

reactjs、annotations、wysiwyg、draftjs、slate.js

我试图使WYSIWYG编辑器能够对选定的文本进行注释。slatejs有“setKeyGenerator”功能。然而，我找不到任何关于slatejs的“setKeyGenerator”的

浏览 8提问于2017-05-06得票数 1

回答已采纳

1回答

以编程方式跳转到特定块，并将焦点/插入符号移动到修饰的单词

reactjs、draftjs

是否可以以编程方式跳转到特定块并将焦点/插入符号移动到修饰的单词？

浏览 3提问于2018-01-16得票数 1

回答已采纳

1回答

使用execCommand插入文本会导致复制问题

javascript、facebook、reactjs、xul、execcommand

我正在开发一个Firefox扩展，它使用键盘快捷键将波兰字符插入到任何文本字段。它适用于所有文本字段，除了Facebook、Draft.js和任何响应contentEditable DIV。复制步骤：在dev工具控制台中执行document.execCommand("insertHTML"您可以删除其中一个实例，但另一个实例是不可删除的，但是可<em

浏览 4提问于2016-05-03得票数 1

回答已采纳

3回答

如何用Next.js实现诸如Quill或Draft.js之类的富文本编辑器？

javascript、reactjs、next.js、quill、draftjs

出于搜索引擎优化和性能的目的，我有一个使用Next.js构建的大型应用程序，该应用程序有一个超级交互的部分，它需要一个文本编辑器(如Quill.js或Draft.js)，其中的数据在两个用户之间使用Socket.io问题是我不能让文本编辑器与Next.js一起工作。当我导入Quill时，它显示‘文档未定义’，因为服务器上没有文档。使用Draft.js，它不会呈现任何内容，但也不会

浏览 78提问于2019-03-25得票数 5

回答已采纳

2回答

什么是一个好的文本编辑库的反应-本机？

react-native、text-editor

我在找一个文字编辑库，但是我什么也找不到，也许有经验的人能帮我。请帮忙，谢谢。

浏览 3提问于2017-09-26得票数 2

1回答

在firebase中存储富文本

firebase、firebase-realtime-database

我有一些书的摘要想要展示给用户。在firebase中存储富文本以显示给用户的最佳方式是什么？我应该使用firebase数据库吗？我有一个包含所有书籍的数据库，我正打算为书籍摘要文本创建一个列。

浏览 7提问于2019-10-09得票数 4

1回答

我编写了一个文本编辑器(完全由JS生成，基本上是wysiwyg，它用html返回输出)，现在我正在学习响应。我制作了一个“文档”组件，其中包含“纸张”组件，但现在我想要将这两件事连接起来--纸张(in React)和文本编辑器(JavaScript)。，所以我的问题是：，这是一个好的实践吗？如果不是的话，我是否应该将文本编辑器重新制作成React呢？在我看来，对于这样一个问题，React并不是一个很好的选择，但我在这个问题上是相当差

浏览 1提问于2017-07-20得票数 0

回答已采纳

1回答

用draft.js拼写更正？

reactjs、draftjs

我使用的是draft.js (和Electron)。我已经设置了我的自定义拼写检查器，并且在执行"webFrame.setSpellCheckProvider(...)“之后它可以正常工作。我的草稿编辑器正在更正拼写错误的单词。同时，我还在计算一个拼写错误单词的可能替换列表，但是draft.js应用编程接口文档并没有提到如何进行实际的更正。

浏览 0提问于2018-02-26得票数 0

2回答

DraftJs :添加自定义HTML + CSS的自定义按钮

javascript、reactjs、typescript、draftjs、react-draft-wysiwyg

单击该按钮时，一些自定义的超文本标记语言(包括<button>)将被添加到内容本身。我知道如何添加自定义按钮，文档就在那里。按钮被添加，onclick调用已定义的方法insertText。但是使用insertText(draft.js的DraftModifier类中的一个方法)，它似乎只将我的HTML代码作为字符串添加。有没有不同的方法可以用来将自定义HTML添加到内容中。我想添加真正的HTML。

浏览 20提问于2021-11-03得票数 0

1回答

如何在Facebook Draft.js中创建带有装饰器的链接实体

javascript、facebook、reactjs、draftjs

我正在使用Facebook Draft.js，当在文本中检测到有效的url时，我需要创建一个链接实体。目前，我正在使用一个装饰器来实现一种策略，检测文本中是否有链接，比如草稿-js- link -plugin，但我在将文本修改为不可变的链接实体时遇到了一些困难。事实上，我用编辑器的道具装饰，但我不能修改编辑器的状态，所以，应用这个新的链接实体。p

浏览 2提问于2017-04-24得票数 2

回答已采纳

3回答

如何在文本区域中模拟一个人工插入符号？

javascript、jquery、textarea、caret

我想要做的是类似于协同编辑器的工作原理。我想让两个人编辑同一个文档。为此，我必须模拟一个人工插入符号。我可以根据文本区域中指定位置的添加和删除来提取其他用户的活动。然后，我将把位置和动作一起传递给另一个文档。在那里，我需要在发送的坐标上执行所需的更改。我已经搜索并找到了足够多的方法来设置插入符号位置，并在当前插入符号位置插入或删除文本，但问题是文档的插入符号会移动

浏览 2提问于2012-05-28得票数 5

1回答