.tsx 中的 Reactjs RichTextEditor 自定义工具栏

Question

如果在富文本编辑器中单击 ? 工具栏项，我想添加新的自定义 HTML 标记，例如 <h1></h1>。但是，在onClickHelp 函数中单击自定义工具栏项时，我无法获取最新值。

在 RichTextEditor.tsx 中，

import '../../node_modules/@syncfusion/ej2-icons/styles/material.css';
import '../../node_modules/@syncfusion/ej2-buttons/styles/material.css';
import '../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
import '../../node_modules/@syncfusion/ej2-inputs/styles/material.css';
import '../../node_modules/@syncfusion/ej2-lists/styles/material.css';
import '../../node_modules/@syncfusion/ej2-navigations/styles/material.css';
import '../../node_modules/@syncfusion/ej2-popups/styles/material.css';
import '../../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';
import {
  Count,
  HtmlEditor,
  Inject,
  Image,
  Link,
  QuickToolbar,
  RichTextEditorComponent,
  Toolbar,
  ToolbarSettingsModel,
  ToolbarType
} from '@syncfusion/ej2-react-richtexteditor';

import { FC, useRef, useState } from 'react';

interface RichTextEditorProps {
  value?: string;
  onChange?: (value: string) => void;
}

const RichTextEditor: FC<RichTextEditorProps> = ({
  value,
  onChange
}) => {
  const editorRef = useRef<RichTextEditorComponent>(null);
  const onClickHelp = () => {
    console.log(value);
  };

  const toolbarSettings: ToolbarSettingsModel = {
    type: ToolbarType.MultiRow,
    items: [{
      template:
        '<button type="button" class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar_help"  style="width:100%"><div class="e-tbar-btn-text" style="font-weight: 800;"> ?</div></button>',
      undo: true,
      click: onClickHelp,
      tooltipText: 'Help'
    }, 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'FontName', 'FontSize', 'FontColor', 'BackgroundColor', 'LowerCase', 'UpperCase', '|', 'Formats', 'Alignments', 'OrderedList', 'UnorderedList', 'Outdent', 'Indent', '|', 'CreateLink', 'Image', '|', 'ClearFormat', 'SourceCode', '|', 'NumberFormatList', 'BulletFormatList', 'Undo', 'Redo'
    ],
  };

  return (
    <RichTextEditorComponent
      ref={editorRef}
      value={value}
      toolbarSettings={toolbarSettings}
      maxLength={30000}
      height={400}
      saveInterval={1}
      showCharCount
      iframeSettings={{ enable: true }}
      change={(e) => {
        onChange(e?.value);
      }}
    >
      <Inject services={[Link, Image, HtmlEditor, Toolbar, QuickToolbar, Count]} />
    </RichTextEditorComponent>
  );
};

RichTextEditor.defaultProps = {
  value: ''
};

export default RichTextEditor;

来自rich text editor 和example 的参考

Answer 1

问题是由changefunction 中的props.onChange(e?.value); 代码引起的。它在App 组件上更新value，然后强制重新渲染RichTextEditor 组件。当props.value 发生变化时，会创建一个新的ToolbarSettingsModel 实例，默认情况下它不是全屏模式。

您可以将toolbarSettings 的定义移到RichTextEditor 组件之外，并将onClickHelp 函数绑定到组件内的click 属性上，例如toolbarSettings.items[5].click = onClickHelp;

您可以查看this sandbox 以获取此用法的实时工作示例。

您的完整代码将如下所示：

import {
  Count,
  HtmlEditor,
  Inject,
  Link,
  QuickToolbar,
  RichTextEditorComponent,
  Toolbar,
  ToolbarSettingsModel,
  ToolbarType
} from "@syncfusion/ej2-react-richtexteditor";

import { useRef } from "react";

import "./styles.css";

const toolbarSettings: ToolbarSettingsModel = {
  type: ToolbarType.MultiRow,
  items: [
    "Undo",
    "Redo",
    "|",
    "FullScreen",
    "SourceCode",
    {
      template:
        '<button type="button" class="e-tbar-btn e-btn" tabindex="-1" id="custom_tbar_help"  style="width:100%"><div class="e-tbar-btn-text" style="font-weight: 800;"> ?</div></button>',
      undo: true,
      tooltipText: "Help"
    }
  ]
};

export default function RichTextEditor(props: {
  value: string;
  onChange: (value: string) => void;
}) {
  const editorRef = useRef<RichTextEditorComponent>(null);

  const onClickHelp = () => {
    console.log("help");
  };

  toolbarSettings.items[5]["click"] = onClickHelp;

  return (
    <RichTextEditorComponent
      ref={editorRef}
      value={props.value}
      toolbarSettings={toolbarSettings}
      maxLength={30000}
      saveInterval={1}
      showCharCount
      iframeSettings={{ enable: true }}
      change={(e) => {
        console.log("change happened", e?.value);
        props.onChange(e?.value);
      }}
    >
      <Inject services={[Link, HtmlEditor, Toolbar, QuickToolbar, Count]} />
    </RichTextEditorComponent>
  );
}