Draft.js 的 RichUtils.toggleInlineStyle 不起作用

Draft.js 's RichUtils.toggleInlineStyle doesn't work

本文关键字：toggleInlineStyle 不起作用 RichUtils js Draft      更新时间：2023-09-26

Draft.js 的 RichUtils.toggleInlineStyle 无法正常工作。 请帮忙！我的代码在JSfiddle上。

有没有误会？

var TextArea = React.createClass({
  ...
  toggleBlockStyle: function(blockType) {
    this.onChange(RichUtils.toggleBlockType(this.state.editorState, blockType)); // don't work!
  },
  toggleInlineStyle: function(inlineStyle) {
    this.onChange(RichUtils.toggleInlineStyle(this.state.editorState, inlineStyle)); // don't work!
  },
  handleClear: function() {
    this.onChange(EditorState.push(this.state.editorState, 
        ContentState.createFromText(''), 'remove-range')); // don't work!
  },
  ...
  render: function() {
    return (
      <div onClick={this.onFocus}>
        {this.renderButtons()}
        <Editor editorState={this.state.editorState}
          className={this.props.className}
          name={this.props.name} ref="editor"
          placeholder={this.props.placeholder}
          handleKeyCommand={this.handleKeyCommand}
          onChange={this.onChange}
          spellCheck={true}
          stripPastedStyles={true}
          customStyleMap={myStyleMap}/>
      </div>);
   }
}

使用按钮切换样式时，会导致编辑器失去焦点，并且不会应用样式。不要使用 onClick ，请使用在编辑器取消焦点之前触发的onMouseDown。

我在这里的 github 线程中找到了此修复程序。为方便起见，引用：

但是，使用 onClick 会导致文本区域失去焦点，并且样式不会切换。我做了一些挖掘，发现了其他建议在onClick函数上使用preventDefault的解决方案，但这没有任何作用。使用此事件处理程序，仅当文本首先突出显示并且不允许在键入之前设置文本样式时，才会切换样式。我看到了另一种解决方案，建议将onClick替换为onMouseDown，因为它不会导致文本区域失去焦点。我试过这个，它奏效了。我还深入研究了 Draft.js 的源代码，在演示编辑器代码中我看到了这段代码：

 //...
  render() {
//...
    return (
      <span className={className} onMouseDown={this.onToggle}>
        {this.props.label}
      </span>
    );
  }
};

它没有出现的原因是您需要包含可用的 css 文件。包括 css 文件，它会很好。(草案.css(

https://draftjs.org/docs/advanced-topics-issues-and-pitfalls/#missing-draftcss

请参阅页面的最后一行。

通过在运行 Draft JS 编辑器的以下行中包含 Draft.css 文件，在您的应用程序中包含该文件。

import "draft-js/dist/Draft.css";

渲染编辑器时应包括草稿.css。详细了解原因。

相关文章：
  • 没有找到相关文章