javascript - 如何在 draft.js 中设置默认字体系列和大小

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 样式工作正常，但是当组件获得焦点时，font size 和 family 消失了。

你能建议正确的方法吗？

Answer 1

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

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

这里是陷阱。目前，您可以使用 styleMap 预定义这些内联样式，但您无法在用户选择任意字体系列(或大小或颜色)时真正即时创建它们。

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

(从技术上讲，您可以动态添加样式，但它不会触发重新渲染，因此这不是真正可用的。)

这里有一个 Unresolved 问题: https://github.com/facebook/draft-js/issues/52

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