我正在使用 Draft.jsEditor组件。我有一个通过blockRendererFnprop正确指定的自定义块渲染器。该组件EditorBlock按照Draft 文档中的建议呈现从 Draft-js 导入的内容。在我在自定义块渲染器中获得的道具中，我没有该块是否为只读的信息。至少默认情况下不是。我可以通过 获得它blockProps，但是我觉得我错过了一些东西。就像使用EditorBlock. 就像它可以readOnly从上下文或其他东西中获取价值一样。
这是我的责任，我的渲染块而不EditorBlock当readOnly的true？我有责任readOnly通过blockProps?将值传播到我的自定义块渲染器？
我已经在一个项目上实现了 Draft JS 作为一个简单的编辑器，但是我在设置无序列表的样式时遇到了麻烦，特别是更改项目符号的颜色以匹配文本颜色。
文档中似乎没有关于如何将样式应用于li包装unordered-list-item项目的信息。我可以选择文本并应用颜色，但这会产生如下所示的编辑器状态：
{
"entityMap": {},
"blocks": [
{
"key": "bcci",
"text": "Heading",
"type": "unstyled",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 0,
"length": 7,
"style": "red"
}
],
"entityRanges": []
},
{
"key": "28tv7",
"text": "One",
"type": "unordered-list-item",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 0,
"length": 3,
"style": "yellow"
}
],
"entityRanges": []
},
{
"key": "85hig",
"text": "Two",
"type": "unordered-list-item",
"depth": 0,
"inlineStyleRanges": [
{
"offset": 0,
"length": 3,
"style": "red"
}
], …我添加了一个名为 的自定义块类型section，它将所选文本包装为红色。当您单击section编辑工具栏中的时，它工作正常。但是，当用于convertFromHTML渲染初始内容时，
const sampleMarkup =
'<b>Bold text</b><br/>Section Testing:<section>dsasdasad</section><br/><i>Italic text</i>';
编辑器仍然将section类型视为unstyle类型。是否convertFromHTML支持用于初始渲染的自定义块类型？有解决方案吗？
代码：
const {Editor,convertFromHTML,ContentState, EditorState,DefaultDraftBlockRenderMap, RichUtils} = Draft;
const blockRenderMap = Immutable.Map({
'section': {
element: 'section'
}
});
const extendedBlockRenderMap = DefaultDraftBlockRenderMap.merge(blockRenderMap);
class RichEditorExample extends React.Component {
constructor(props) {
super(props);
const sampleMarkup =
'<b>Bold text</b><br/>Section Testing:<section>dsasdasad</section><br/><i>Italic text</i>';
const blocksFromHTML = convertFromHTML(sampleMarkup);
const state = ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks,
blocksFromHTML.entityMap
);
this.state = {editorState: EditorState.createWithContent(state)};
this.focus = () => this.refs.editor.focus();
this.onChange …我使用以下命令在编辑器中插入一些文本：
_insertText(text) {
const { editorState, onChange } = this.props
const newContentState = Modifier.insertText(
editorState.getCurrentContent(),
editorState.getSelection(),
text
)
const newState = EditorState.createWithContent(newContentState)
onChange(EditorState.acceptSelection(newState, editorState.getSelection()))
}
但插入后，光标停留在插入点的锚位置。我想将其移动到插入文本的末尾，这样我就可以继续编辑而无需手动移动光标。
请帮忙。
我正在使用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 元素。
如何做呢？
我开始使用draft-js 中的装饰器，并且能够渲染在CompositeDecorator 中定义的组件。记录在案的行为效果很好。
也就是说，我试图弄清楚如何从这些组件中访问 editorState。contentState 是传入的唯一有用的道具，但据我所知，我无法从 contentState 解析 editorState。
我主要尝试做的是能够通过与呈现的组件本身交互来编辑或删除。即打开一个对话框来更改实体数据。在 dialogForm 的 onSave() 中，我需要推送新的 editorState，但截至目前，它不在范围内。
有没有办法在装饰器组件的范围内访问 editorState 或者有更智能的解决方案？
自定义内联工具栏，如其文档中所述，未按预期工作。即使添加了自定义按钮，它也会继续显示默认的内联工具栏。
我的代码如下。
import Editor from "draft-js-plugins-editor";
import createInlineToolbarPlugin from "draft-js-inline-toolbar-plugin";
import { ItalicButton, BoldButton, UnderlineButton } from "draft-js-buttons";
import "draft-js-inline-toolbar-plugin/lib/plugin.css";
import createLinkPlugin from "draft-js-anchor-plugin";
const linkPlugin = createLinkPlugin(); // Adding link button.
const inlineToolbarPlugin = createInlineToolbarPlugin(
BoldButton,
ItalicButton,
UnderlineButton,
linkPlugin.LinkButton
);
const { InlineToolbar } = inlineToolbarPlugin;
<Editor
editorState={this.state.editorState}
onChange={this.onChange}
plugins={plugins}
ref={element => {
this.editor = element;
}}
/>
<InlineToolbar />
版本如下。
提前致谢。
我正在尝试使用 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 …我正在尝试实现一个按钮，单击它后将内联样式更改为粗体。我想使用 React Hooks 来实现这个例子。
单击按钮后，RichUtils 正在执行，但不会将文本更改为粗体。我缺少什么？
import React, { useEffect, useRef, useState } from 'react';
import {Editor, EditorState, RichUtils} from 'draft-js';
const MyEditor = () => {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const editor = useRef(null);
const focusEditor = () => {
editor.current.focus();
}
const boldText = () => {
let nextState = RichUtils.toggleInlineStyle(editorState, 'BOLD');
setEditorState(nextState);
}
return (
<div onClick = {focusEditor}>
<button onClick = { () => boldText()}>Bold</button>
<Editor
ref = {editor}
editorState = {editorState}
onChange = …我正在使用Draftjs创建一个富文本编辑器。这是最小的代码和框，以便您了解问题所在。
所以我有一个辅助函数getCurrentTextSelection，它返回我正在选择的文本：
const getCurrentTextSelection = (editorState: EditorState): string => {
const selectionState = editorState.getSelection();
const anchorKey = selectionState.getAnchorKey();
const currentContent = editorState.getCurrentContent();
const currentContentBlock = currentContent.getBlockForKey(anchorKey);
const start = selectionState.getStartOffset();
const end = selectionState.getEndOffset();
const selectedText = currentContentBlock.getText().slice(start, end);
return selectedText;
};
当我在文本编辑器外部单击时，焦点会丢失，因此不会选择文本（但保留 的选定文本editorState）。
是否有一种编程方式可以使用 重新选择此文本editorState？这样，当您单击该Select text again按钮时，文本编辑器中的文本就会被选中。