Question

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>);
   }
}

Answer 1

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

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

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

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

Answer 2

它未来的原因是您需要包含可用的css文件。包括css文件，它会没事的。（Draft.css）

https://draftjs.org/docs/overview.html#content

查看页面的最后一行。

Answer 3

通过在运行JS编辑器草稿的行中添加以下行，将 Draft.css 文件添加到您的应用中。

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

渲染编辑器时应包含

Draft.css。了解有关why的更多信息。

Draft.js的RichUtils.toggleInlineStyle不起作用

3 个答案: