如何在 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.

实现颜色选择器时，我也一直在努力解决这个问题

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

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

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

Answer 2

如果您尝试在 draft.js 编辑器中设置默认字体大小，只需像下面这样设置您的组件

请注意 div 包裹在编辑器、EmojiSuggestions 和 mentionSuggestion 组件周围。只需将编辑器的 className 设置为您的字体大小。在我的例子中是 fs-1。请注意，我添加了一个来自附加 scss 文件的 editorStyles.editor class。这包含编辑器的一些 scss。

这是 scss 的样子，如果您只是想编辑默认字体样式，则无需添加它

只是展示这个，不需要设置默认字体大小。这是在 div wrapper

中完成的

.editor {
  box-sizing: border-box;
  border: 1px solid #ddd;
  cursor: text;
  padding: 16px;
  border-radius: 2px;
  margin-bottom: 9px;
  box-shadow: inset 0px 1px 8px -3px #ABABAB;
  background: #fefefe;
}

.editor :global(.public-DraftEditor-content) {
  min-height: 140px;
}

.mention {
  color: #2c7be5
}

 <div 
              style={{minHeight: "7em", maxHeight: "10em", overflow: "auto"}}
              className={`border border-2x border-300 bg-light rounded-soft fs-1 ${editorStyles.editor}` }
              onClick={() => { messageFieldRef.current.focus(); }}
            >
            <Editor
              editorKey={'editor'}
              currentContent={ContentState}
              editorState={tempEditorState ? tempEditorState : editorState}
              onChange={setEditorState}
              plugins={plugins}
              ref={messageFieldRef}
            />
            <EmojiSuggestions />
            <MentionSuggestions
              open={open}
              onOpenChange={onOpenChange}
              suggestions={suggestions}
              onSearchChange={onSearchChange}
              onAddMention={(e) => {// get the mention object selected
              }}
              entryComponent={Entry}
              />
            </div>
            <div>
                <EmojiSelect closeOnEmojiSelect />
              <span color="light" className="px-3 py-1 bg-soft-info rounded-capsule shadow-none fs--1 ml-3" >
                <FontAwesomeIcon icon="tags" transform="left-3"/>
                 Press <strong>@</strong>  while typing to insert custom fields
              </span>
            </div>

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

How to set default font family and size in draft.js

html

javascript

draftjs