React 草稿所见即所得默认字体大小

Question

请问如何在react draft wysiwyg中更改默认字体大小https://github.com/jpuri/react-draft-wysiwyg#readme？ Class 定义工具栏：

export const toolbar = {
  options: ['inline', 'textAlign', 'list', 'link', 'fontSize', 'colorPicker', 'emoji'],
  inline: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
    options: ['bold', 'italic'],
  },
  list: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
    options: ['unordered'],
  },
  textAlign: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
    options: ['left', 'center', 'right']
  },
  link: {
    inDropdown: false,
    className: undefined,
    component: undefined,
    popupClassName: undefined,
    dropdownClassName: undefined,
    showOpenOptionOnHover: true,
    defaultTargetOption: '_self',
    options: ['link'],
    linkCallback: undefined
  },
  fontSize: {
    options: [8, 9, 10, 11, 12, 14, 16, 18, 24, 30, 36, 48, 60, 72, 96], 
    className: undefined,
    component: undefined,
    dropdownClassName: undefined,
  },
  colorPicker: {
    className: undefined,
    component: undefined,
    popupClassName: undefined,
  },
  emoji: {
    inDropdown: true,
    className: undefined,
    component: undefined,
    popupClassName: undefined,
  },
}

字体大小现在默认为 14。我不知道为什么。我在所有源代码中搜索了 14，但我没有在任何地方找到它。当列表中不存在选项 14 时，默认不选择字体大小。想要的是预选选项字体大小= 24。感谢回复。

Answer 1

我有同样的问题，甚至在白天都在努力解决它！
很遗憾，文档中没有官方解决方案...... 找到 2 个解决方案：

简单（但不灵活）：只需添加此 css 代码

.DraftEditor-root {
  font-size: 24px;
}

这会将 size=24px 应用于页面上的所有 react-draft-wysiwyg 项目/

在库源代码中找到：
https://github.com/jpuri/react-draft-wysiwyg/blob/f59ee8419cdbd45aab3bdfdf1995f112b09bbb6a/src/controls/FontSize/Component/index.js#L30

复杂，但更灵活： Firstli, import util functions (react-draft-wysiwyg 使用这个库本身)

import {
    toggleCustomInlineStyle, getSelectionCustomInlineStyle,
} from 'draftjs-utils';

其次，在每个渲染器上（！？）你应该执行：

const fontSize = getSelectionCustomInlineStyle(editorState, ['FONTSIZE',]).FONTSIZE
if (!fontSize) {
    setEditorState(toggleCustomInlineStyle(editorState, 'fontSize', 24))
}

为什么在每次渲染时而不是在创建 EditorState 时？
我不知道。
但是这个自定义样式在焦点编辑器时被重置为空（所以 - 默认），所以我每次都必须强制它。

我希望第一个解决方案对我和你都足够，因为第二个看起来像是解决方法和不好的做法！

React 草稿所见即所得默认字体大小

React draft wysiwyg default font size

javascript

reactjs

react-native

react-draft-wysiwyg