无法获取draft-js Modifier 的applyInlineStyle 函数来应用内联样式

Question

我正在利用draft-js 和react-draft-wysiwyg 库来创建一个所见即所得的编辑器。我希望向工具栏添加一些自定义选项以呈现最终的 HTML，例如 inline line-height。但是，我无法使修饰符的 applyInlineStyle()功能正常工作。

编辑：

import React, { Component } from "react";
import { ContentState, convertFromHTML, convertFromRaw, convertToRaw, EditorState, Modifier } from "draft-js";
import { Editor } from "react-draft-wysiwyg";
import draftToHtml from "draftjs-to-html";
import "../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const toolbarOptions = {
  options: ["inline"],
  inline: {
    options: ["bold", "italic", "underline"],
    bold: { className: "rich-text-icon" },
    italic: { className: "rich-text-icon" },
    underline: { className: "rich-text-icon" }
  },
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editorState: EditorState.createEmpty(),
      finalHTML: ""
    };
  }

  onEditorStateChange = editorState => {
    const raw = convertToRaw(editorState.getCurrentContent());
    const markup = draftToHtml(raw);
    this.setState({
      editorState,
      finalHTML: markup
    });
    console.log(markup);
  };

  render() {
    return (
      <div>
        <div className="App">
          <Editor
            editorState={this.state.editorState}
            onEditorStateChange={this.onEditorStateChange}
            toolbar={toolbarOptions}
            toolbarCustomButtons={[<ApplyLineHeight />]}
            stripPastedStyles={true}
          />
        </div>
      </div>
    );
  }
}

自定义行高选项：

class ApplyLineHeight extends Component {
  applyLineHeight = () => {
    const { editorState, onChange } = this.props;
    const contentState = Modifier.applyInlineStyle(editorState.getCurrentContent(), editorState.getSelection(), "line-height: 20px;");
    onChange(EditorState.push(editorState, contentState, "change-inline-style"));
  };

  render() {
    return <div onClick={this.applyLineHeight}>Change line height</div>;
  }
}

当我按照文档中的示例（在“向工具栏添加新选项”下）时，它可以与Modifier.replaceText()函数一起使用（替换文本），但在尝试返回行高时不起作用。我返回了<p></p>没有应用内联样式的相同标签。什么可能导致此函数无法呈现？

Answer 1

我们先看看 api Modifier.applyInlineStyle()

applyInlineStyle(
  contentState: ContentState,
  selectionState: SelectionState,
  inlineStyle: string 
): ContentState

inlineStyle应该是在 customStyleMap 中定义的名称

customStyleMap是Editor的属性

像这样

import {Editor} from 'draft-js';

const styleMap = {
  'STRIKETHROUGH': {  // STRIKETHROUGH is the one which should be applied to inlineStyle
    textDecoration: 'line-through',
  },
};

class MyEditor extends React.Component {
  // ...
  render() {
    return (
      <Editor
        customStyleMap={styleMap}
        editorState={this.state.editorState}
        ...
      />
    );
  }
}
// The usage should be like this:
// Modifier.applyInlineStyle(xxx, xxx, 'STRIKETHROUGH')