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

Question

我正在学习draft.js编辑器,但无法找到如何配置默认的font-family和字体大小.

我试过这种方式:

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

我希望这将在一周左右的时间内得到解决,我可以用示例代码编辑这个答案来完成你所追求的目标.