react rte/草稿-js: blockRenderMap不影响实际编辑器状态
react rte/草稿-js: blockRenderMap不影响实际编辑器状态
提问于 2022-03-11 14:08:16
我使用blockRenderMap在编辑时给出了小文本的选项。默认情况下，react rte不支持它。这就是要这样做的代码：
import React, {Component} from 'react';
import RichTextEditor from 'react-rte';
import Immutable from 'immutable'
import Draft from 'draft-js'
const blockRenderMap = Immutable.Map({
'small': {
element: 'small'
}
});
// Include 'paragraph' as a valid block and updated the unstyled element but
// keep support for other draft default block types
const extendedBlockRenderMap = Draft.DefaultDraftBlockRenderMap.merge(blockRenderMap);
class MyStatefulEditor extends Component {
state = {
value: RichTextEditor.createEmptyValue()
}
onChange = (value) => {
console.log(value.toString('html'))
this.setState({value});
if (this.props.onChange) {
// Send the changes up to the parent component as an HTML string.
// This is here to demonstrate using `.toString()` but in a real app it
// would be better to avoid generating a string on each change.
this.props.onChange(
value.toString('html')
);
}
};
render ()
{
const toolbarConfig = {
// Optionally specify the groups to display (displayed in the order listed).
display: ['INLINE_STYLE_BUTTONS', 'BLOCK_TYPE_BUTTONS', 'LINK_BUTTONS', 'BLOCK_TYPE_DROPDOWN', 'HISTORY_BUTTONS'],
INLINE_STYLE_BUTTONS: [
{label: 'Bold', style: 'BOLD', className: 'custom-css-class'},
{label: 'Italic', style: 'ITALIC'},
{label: 'Underline', style: 'UNDERLINE'}
],
BLOCK_TYPE_DROPDOWN: [
{label : 'Small', style: 'small'},
{label: 'Normal', style: 'unstyled'},
{label: 'Heading Large', style: 'header-one'},
{label: 'Heading Medium', style: 'header-two'},
{label: 'Heading Small', style: 'header-three'}
],
BLOCK_TYPE_BUTTONS: [
{label: 'UL', style: 'unordered-list-item'},
{label: 'OL', style: 'ordered-list-item'}
]
};
return (
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
blockRenderMap={extendedBlockRenderMap}
/>
);
}
}
export default MyStatefulEditor;在使用编辑器时，这样做很好。
但是在onChange函数中，如果我打印包含editorValue的"value“变量，它会显示如下所示：
<p>asdas</p>而不是：
<small>asdas</small>同时，如果我选择一个默认的受支持的选项，比如标题大：
我把value打印在onChange里面，我看到了这个：
<h1>asdas</h1>为什么我的blockRenderMap不能工作，而默认的工作呢？对于适用的情况，如何使value变量包含预期的small标记而不是p标记？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-03-14 15:58:17
这里有很多斗争
- rte rte不支持小字体，所以我必须使用blockRenderMap来指定一个新的映射，如Draft.js API中所描述的( react-rte允许传递通过道具)。
- 不过，blockRenderMap还不够好。它只在编辑模式下工作，所以这种方法是解决方案的50% (或者0，我不知道)。事实上，Draft.js (不认为是react做了这件事，但也找不到确切的草案代码来做这件事)在默认情况下转换它尚未映射为
<p>的内容。我真的希望blockRenderMap的扩展能解决所有问题，但是没有。 - 在Draft.js中定义的默认映射是限制：https://draftjs.org/docs/advanced-topics-custom-block-render-map/。一个讨厌的想法是使用
<section>作为样式，然后尝试向它应用一个CSS类。但默认情况下，部分不可用。即使您将它指定为自定义blockRenderMap，它也会在value变量中将其转换为<p>。因此，我最终修改了<h4>。
溶液
编辑期间：
- 指定自定义块样式：https://draftjs.org/docs/advanced-topics-block-styling/。在我的例子中，一个用于小字体的CSS类：
.rte-small-font {
font-size: smaller;
font-weight:normal;
display:block;
margin:0;
padding:0;
}- 决定我将使用哪个受支持的DraftJS块：
<h4>(因为我们没有使用它)。CSS类基本上是将<h4>转换为<small>。 - 在
BLOCK_TYPE_DROPDOWN：{label : 'Small', style: 'header-four'},中添加此项
然后，当onChange()被调用时(基本上是“保存”编辑的文本)：
- 在
onChange()中创建一个新字符串，方法是将<h4>替换为<small>：let newString = value.toString('html').replace("<h4>", "<small>").replace("</h4>", "</small>"); - 将该字符串传递给我们拥有的另一个函数，该函数基本上是用该字符串填充“webpart”的内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71439774
复制相关文章
相似问题
腾讯云开发者
