Question

我正在利用draft-js和react-draft-wysiwyg库创建一个WYSIWYG编辑器。我希望向工具栏添加一些自定义选项以呈现最终的HTML，例如内联$keys = array_keys((array)$pro["sources"][$id]); if(count($keys)>15) { $keys = asort($keys); foreach($keys as $key) { if(count($keys) <= 15) break; else { unset($pro["sources"][$id][$key]); unset($keys[$key]); } } }。但是，我无法使Modifier's 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>
    );
  }
}

当我按照docs（在“向工具栏添加新选项”下）中的示例进行操作时，它可以与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()标签，但未应用任何内联样式。是什么导致此功能无法呈现？

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

无法获取草稿js修改器的applyInlineStyle函数以应用内联样式

1 个答案: