React draft wysiwyg默认字体大小



我能问你如何更改react draft wysiwyg中的默认字体大小吗https://github.com/jpuri/react-draft-wysiwyg#readme?类定义工具栏:

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不在列表中时,默认不选择字体大小。想要的是预先选择选项font size=24。谢谢回复。

我也有同样的问题,甚至在令人惊叹的一天里都在苦苦挣扎
很遗憾,在文档中并没有一个正式的解决方案。。。找到2个解决方案:

  1. 简单(但不灵活(:只需添加此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

  1. 复杂,但更灵活:首先,导入util函数(react-draft-wysiwyg使用此库本身(
import {
toggleCustomInlineStyle, getSelectionCustomInlineStyle,
} from 'draftjs-utils';

其次,在每个渲染上(!?(你应该执行:

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

为什么在每次渲染时,而不是在创建EditorState时
我不知道
但是当焦点编辑器时,这个自定义样式被重置为空(因此为默认(,所以我每次都必须强制使用它。

我希望第一个解决方案对我和你们来说都足够了,因为第二个看起来像是变通方法和糟糕的做法!

最新更新