4

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

3 回答 3

5

当您使用按钮切换样式时，它会导致编辑器失去焦点并且不应用样式。而不是onClick，使用onMouseDownwhich 在编辑器未聚焦之前触发。

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

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

 //...
  render() {
//...
    return (
      <span className={className} onMouseDown={this.onToggle}>
        {this.props.label}
      </span>
    );
  }
};
于 2020-11-06T22:04:24.797 回答
0

它没有出现的原因是您需要包含可用的 css 文件。包含css文件就可以了。（草案.css）

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

查看页面的最后一行。

于 2017-07-04T11:39:44.767 回答
-1

在您的应用程序中包含Draft.css文件，方法是在运行 Draft JS Editor 的位置包含以下行。

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

渲染编辑器时应包含 Draft.css。详细了解原因。

于 2018-08-12T04:19:27.413 回答