Question

单击按钮时如何更改字体大小，有人可以指导我吗？现在我尝试这些

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>

Answer 1

事件处理函数应该像下面这样声明，当您调用onClick按钮时，将使用this.toggleFontSize。

只需这样做

  toggleFontSize = fontSize => {
       const { editorState } = this.state;
       RichUtils.toggleBlockType( editorState, fontSize  );
  }

  <button onClick={e => this.toggleFontSize('100px')}>100px</button>

Answer 2

更改fontSize就像在Draftjs上管理任何其他内联样式一样有点棘手，特别是如果您对Immutable模型如何在ContentState和EditorState上工作的了解甚少的话。定制任何内联样式的最简单方法是使用draft-js-custom-styles模块。

以下是在文本选择中切换fontSize的方法：

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，以获取更多详细信息。

Answer 3

您可以添加功能_onFontSizeClick，然后customStyleMap将其提供给<Editor />

import { Editor, EditorState, RichUtils } from 'draft-js';

const _onFontSizeClick = (e) => {
    e.preventDefault();
    onEnterText(RichUtils.toggleInlineStyle(editorState, 'FONT_SIZE_40'));
}
const customStyleMap = {
    FONT_SIZE_40: {
      fontSize: "40px"
    }
};


<button className = "" onMouseDown = { e => { _onFontSizeClick(e)} }>H1</button>
<Editor editorState={editorState} customStyleMap={customStyleMap} />

单击按钮draft.js反应时如何更改字体大小

3 个答案: