.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 and example

Answer 1

问题是由 change 函数中的 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>
  );
}

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

Reactjs RichTextEditor Custom Toolbar in .tsx

reactjs

rich-text-editor