reactjs - react-rte(富文本编辑器): how to implement inline style for custom components?

Question

react-rte 是一个基于draft-js 的富文本编辑器。我的目标是使用例如 Material UI React 组件自定义工具栏组件。阅读 react-rte 文档，我认为有两个样式 Hook :

1. toolbarConfig 用于 CSS ( link );和
2. customControls 用于完全覆盖组件 (as seen in demo)。

我相信我的用例需要 customControls，但是从提供的演示(见下文)中我无法理解如何将自定义组件 Hook 回 rte 的功能。例如，如果我为 BOLD 渲染一个自定义按钮组件，这个按钮如何获得本应由 toolbarConfig 提供的默认按钮的默认功能？

带有自定义控件的编辑器演示:

<RichTextEditor
  value={value}
  onChange={this._onChange}
  className="react-rte-demo"
  placeholder="Tell a story"
  toolbarClassName="demo-toolbar"
  editorClassName="demo-editor"
  readOnly={this.state.readOnly}
  customControls={[
    // eslint-disable-next-line no-unused-vars
    (setValue, getValue, editorState) => {
      let choices = new Map([
        ['1', {label: '1'}],
        ['2', {label: '2'}],
        ['3', {label: '3'}],
      ]);
      return (
        <ButtonGroup key={1}>
          <Dropdown
            choices={choices}
            selectedKey={getValue('my-control-name')}
            onChange={(value) => setValue('my-control-name', value)}
          />
        </ButtonGroup>
      );
    },
    <ButtonGroup key={2}>
      <IconButton
        label="Remove Link"
        iconName="remove-link"
        focusOnClick={false}
        onClick={() => console.log('You pressed a button')}
      />
    </ButtonGroup>,
  ]}
/>

我当前无效的实现:

<RichTextEditor
  value={this.state.value}
  onChange={this.onChange}
  customControls={rteCustomControls}
/>

...

const inlineStyleButtonControls = [
  { label: "format_bold", style: "BOLD", component: FormatBoldIcon },
  { label: "format_italic", style: "ITALIC", component: FormatItalicIcon },
  {
    label: "format_underlined",
    style: "UNDERLINE",
    component: FormatUnderlinedIcon,
  },
];

const rteCustomControls = [
  (setValue, getValue, editorState) => {
    return inlineStyleButtonControls.map((button, i) => (
      <IconButton
        key={i}
        color="inherit"
        aria-label={button.label}
        selectedKey={getValue(button.style)}
        onClick={value => setValue(button.style, value)}
      >
        <button.component />
      </IconButton>
    ));
  },
];

Answer 1

如果您的目标纯粹是修改显示，您应该能够通过 CSS 定位按钮以更改它们的显示，就像您定位任何其他 DOM 元素一样。

通过 CSS 更改元素显示。

RichTextEditor button:nth-child(1){
    background-image: url('/icon1.svg');
}
RichTextEditor button:nth-child(2){
    background-image: url('/icon2.svg');
}

或者，通过 javascript 更改元素显示

Array.from(document.querySelectorsAll('RichTextEditor button')).forEach((el)=>{
    // Modify element here
})

如果你还想修改按钮的功能，你可以看看code它们被定义的地方，并可能将它们添加为自定义控件。