@hansevision/tp-richtexteditor-control

A standalone, reusable React component for rendering the Syncfusion Richtext Editor in SharePoint Framework (SPFx) solutions.

Installation

npm install @hansevision/tp-richtexteditor-control

Peer Dependencies

| Package | Version | | ----------- | ---------- | | react | >=16.8.0 | | react-dom | >=16.8.0 |

Usage

Basic usage in an SPFx web part

import { DisplayMode } from '@microsoft/sp-core-library';
import { RichTextEditor, ErrorService } from '@hansevision/tp-richtexteditor-control';

const errorService = new ErrorService();

<RichTextEditor
  spfxContext={this.context}
  licenseKey="XXX"
  displayMode={this.displayMode}
  value={this.properties.textContent}
  onChange={(html) => {
    this.properties.textContent = html;
  }}
  errorService={errorService}
/>;

Props

| Prop | Type | Default | Description | | -------------- | ------------------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------- | | spfxContext | WebPartContext | required | SPFx WebPartContext from the host web part. Required for file picker access. | | displayMode | DisplayMode | required | Current DisplayMode from @microsoft/sp-core-library. Read mode renders plain HTML; Edit mode renders the full editor. | | licenseKey | string | required | Syncfusion EJ2 React License Key | | value | string | undefined | HTML content to display / edit. | | onChange | (html: string) => void | undefined | Called whenever the HTML content changes. | | errorService | ErrorService | new instance | Optional ErrorService for custom error handling. Register handlers via errorService.register(...). | | required | boolean | false | Marks the content as required. | | setFocus | boolean | false | Focuses the editor on mount. | | placeholder | string | null | Placeholder text shown when the editor is empty. | | saveInterval | number | 10000 | Auto-save interval in milliseconds. The onChange callback fires if content changed since the last interval. | | maxLength | number | -1 | Maximum number of characters allowed (-1 = unlimited). |

Development

For static testing:

# Install dependencies (in TP Richtext Editor Controls Project)
npm ci

# Build the package (in TP Richtext Editor Controls Project)
npm run build

# Create Package: hansevision-tp-richtexteditor-control-1.0.0.tgz (in TP Richtext Editor Controls Project)
npm pack

# in the consuming project
npm install ../your-custom-folder/hansevision-tp-richtexteditor-control-1.0.0.tgz

For live-reloading testing:

# In TP Richtext Editor Controls Project
npm link

# In the consuming project
npm link @hansevision/tp-richtexteditor-control

# In TP Richtext Editor Controls Project
npm run build:watch

The build outputs to dist/:

• dist/index.js — CommonJS bundle
• dist/index.esm.js — ES module bundle
• dist/index.d.ts — TypeScript declarations