Question

我正在学习draft.js编辑器，但无法找到如何配置默认字体系列和字体大小。

我试过这种方式：

let editorState = EditorState.createEmpty();

let newState = RichUtils.toggleBlockType(
    editorState,
    'aligncenter'
);

newState = RichUtils.toggleInlineStyle(
    newState,
    'FONT_SIZE_36'
);
newState = RichUtils.toggleInlineStyle(
    newState,
    'TIMES_NEW_ROMAN'
);

奇怪的是， aligncenter 样式运行正常，但当组件获得焦点时，字体大小和系列会消失。

请您建议正确的方法吗？

Answer 1

使用RichUtils.toggleInlineStyle()用于修改当前选定的文本范围（或设置将在当前光标位置输入的文本的内联样式）。没有办法使用它来设置整个文档的默认内联样式（也不建议这样做）。

要获取默认样式，您应该使用CSS并为整个编辑器设置所需的样式。然后，当用户想要非默认样式时（例如从下拉列表中选择字体大小），您应该使用toggleInlineStyle覆盖特定文本范围的样式。

这是一个问题。目前，您可以使用styleMap预定义这些内联样式，但是当用户选择任意字体系列（或大小或颜色）时，您无法实时创建它们。

在尝试为react-rte.org实施颜色选择器时，我一直在努力解决这个问题。

（从技术上讲，你可以动态添加样式，但它不会触发重新渲染，所以它实际上并不可用。）

这里存在一个未解决的问题： https://github.com/facebook/draft-js/issues/52

我希望这会在一周左右的时间内得到解决，我可以用示例代码编辑这个答案来完成您的目标。

如何在draft.js

1 个答案: