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

Question

I am learning draft.js editor and can't find how to configure default font-family and font size.

I tried this way:

let editorState = EditorState.createEmpty();

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

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

What is weird, aligncenter style works fine, but font size and family disappears when component gets focus.

Can you please suggest correct way how to do it?

Answer 1

Using RichUtils.toggleInlineStyle() is for modifying the currently selected range of text (or setting the inline style for text that will be entered at the current cursor position). There is not a way to use this to set the default inline styles for the entire document (nor is this recommended).

To get default styles, you should use CSS and set the styles you want for the entire editor. Then you should override those styles for specific text ranges using toggleInlineStyle when the user wants a non-default style (for instance selecting font-size from a dropdown).

Here's the catch. Currently you can pre-define these inline styles using styleMap but you can't really create them on-the-fly as a user chooses an arbitrary font-family (or size or color).

I have been struggling with this also while trying to implement a color-picker for react-rte.org .

(Technically, you can add styles on the fly, but it won't trigger a re-render, so that's not really usable.)

There is an open issue for this here: https://github.com/facebook/draft-js/issues/52

I expect this will be resolved within a week or so and I can edit this answer with example code to accomplish what you're after.

Answer 2

if your trying to set the default font size in draft.js Editor just set up your component like this below

notice the div that is wrapped around the Editor, EmojiSuggestions, and mentionSuggestion components. Just set the className for the editor to your font size. in my case it is fs-1. Note I have added an editorStyles.editor class that is coming from an attached scss file. This contains some scss for the editor.

Here is what the scss looks like, no need to add this though if you are just trying to edit the default font style

Just showing this, but not needed to set default font size. That is done in 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>