Question

react-rte是基于draft-js的RTF编辑器。我的目标是使用例如材料UI反应组件自定义工具栏组件。通过阅读react-rte文档，我认为有两个样式钩子：

toolbarConfig for CSS（link）；和
customControls用于完全覆盖组件（as seen in demo）。

我相信我的用例要求使用customControls，但是从提供的演示中（请参阅下文），我无法理解如何将自定义组件重新连接到rte的功能中。例如，如果我为BOLD渲染了一个自定义按钮组件，那么此按钮如何获得默认功能，而该功能将变为toolbarConfig提供的默认按钮？

带有customControls的编辑器演示：

<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，并可能将它们添加为自定义控件。

react-rte（Rich Text Editor）：如何为自定义组件实现内联样式？

1 个答案: