Javascript Can'；t获取草稿js修饰符'；s applyInlineStyle函数以应用内联样式

我正在利用草稿js和草稿wysiwyg库创建一个wysiwyg编辑器。我希望向工具栏添加一些自定义选项，以呈现最终的HTML，例如内联

行高

。但是，我无法使

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

import React，{Component}来自“React”；
从“草稿js”导入{ContentState、convertFromHTML、convertFromRaw、convertToRaw、EditorState、Modifier}；
从“react draft wysiwyg”导入{Editor}；
从“draftjs到html”导入draftToHtml；
导入“./node_modules/react draft wysiwyg/dist/react draft wysiwyg.css”；
常量工具栏选项={
选项：[“内联”]，
内联：{
选项：[“粗体”、“斜体”、“下划线”]，
粗体：{className:“富文本图标”}，
斜体：{className:“富文本图标”}，
下划线：{className:“富文本图标”}
},
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
editorState:editorState.createEmpty（），
最后一句话：“
};
}
onEditorStateChange=editorState=>{
const raw=convertToRaw（editorState.getCurrentContent（））；
常量标记=draftToHtml（原始）；
这是我的国家({
编辑状态，
finalHTML：标记
});
console.log（标记）；
};
render（）{
返回(
让我们先看看api修饰符.applyInlineStyle（）

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

inlineStyle应在customStyleMap中定义名称

customStyleMap是编辑器的属性

就这样

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')

从'draft js'导入{Editor}；
常量样式映射={
'STRIKETHROUGH'：{//STRIKETHROUGH是应该应用于inlineStyle的
text装饰：“线通过”，
},
};
类MyEditor扩展了React.Component{
// ...
render（）{
返回(
);
}
}
//用法应如下所示：
//修饰符.ApplyLineStyle（xxx，xxx，'删除线'）
onChange（EditorState.push（EditorState，contentState，“change inline style”））之后返回“handled”（如果在
onChange（EditorState，contentState，“change inline style”）之后返回“handled”（已处理）；
，它可能会解决问题。目前，Draft也在处理同样的操作，这可能会把事情搞砸。你是如何解决的？这方面有什么进展吗？我也有同样的问题
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')