这是我尝试过的:
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.focus = () => this.refs.editor.focus();
this.onChange = (editorState) => this.setState({editorState});
this.toggleFontSize = (fontSize) => this._toggleFontSize(fontSize);
}
_toggleFontSize(fontSize) {
this.onChange(
RichUtils.toggleBlockType(
this.state.editorState,
fontSize
)
);
}
<button onClick={e => this.toggleFontSize('100px')}>100px</button>
最佳答案
更改 fontSize 就像在 Draftjs 上管理任何其他内联样式一样有点棘手,特别是如果您对 Immutable 模型如何在 ContentState 和 EditorState 上工作知之甚少。 自定义任何内联样式的最简单方法是使用 draft-js-custom-styles模块。
以下是如何在文本选择上切换字体大小:
import createStyles from "draft-js-custom-styles";
const customStylesToManage = ["font-size", "color"];
const { styles, customStyleFn, exporter } = createStyles(customStylesToManage, "CUSTOM_")
//CUSTOM_ is going to be used as a prefix for you inline styles
现在您必须在主 Draftjs 编辑器上使用 customStyleFn 以在切换时应用样式
<Editor customStyleFn={customStyleFn} ... />
要将特定样式应用于文本选择,您只需调用样式切换
const newEditorState = styles.fontSize.toggle(editorState, "27px");
并确保更新 editorState 以应用内联样式
updateEditorState(newEditorState);
也支持其他方法,例如,您可以从文本选择中完全删除样式、添加新样式或获取当前内联样式值:
const currentFontSizeForSelectedText = styles.fontSize.current;
检查模块的Docs了解更多详细信息。
关于reactjs - 如何在单击按钮时更改字体大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52881874/