HtmlContentEditorBasic

HTML Content Editor Basic based on TinyMCE Editor.

• Installation
  • Compatibility
• API
  • Properties
    • Inputs
    • Outputs
• Sample
  • Template
  • Component

Installation

User npm:

npm i html-content-editor-basic --save

Compatibility

| Version | Angular Compatibility | | - | - | | 1.x | 20.x |

API

Properties

Inputs

| Name | Description | | ---- | ----------- | | height: string, number, or null (default: null) | sets a static height for the editor. autoresize plugin may not work well when setting this. | | minHeight: number (default: 0) | sets the starting height for the editor. Setting to 0 is the same as not specifing. autoresize plugin may not work well when setting this. | | maxHeight: number (default: 0)| sets the max height for the editor. Setting to 0 is the same as not specifing. When using autoresize plugin it should grow with content till it reaches max height. | | resize: bool (default: true) | allow the editor to be resizable. Note once a user changes the size it is locked at that size and can cause scrollbars. | | focus: bool (default: false) | will auto focus the cursor into editor. Effect for input signal is setup so that if focus is set at a different time from initialization it will move focus into editor. | | enabledPlugins: string[] | plugins that are enabled. Use TinyMceOptionalPlugins enum to get names | | enabledToolbarButtons: string[] | optional toolbar buttons that are enabled. Use TinyMceOptionalToolbarItems enum to get names | | fontSizeOverride: string (default: '') | optional override for available font sizes. Format is a semicolon-separated string of size values (e.g., '8pt 10pt 12pt 14pt 16pt'). When empty, uses TinyMCE defaults. | | fontFamilyOverride: string (default: '') | optional override for available font families. Format is a semicolon-separated string of font names (e.g., 'Arial;Times New Roman;Courier New'). When empty, uses TinyMCE defaults. | | pastePreprocessing: bool (default: false) | enables preprocessing of pasted content to apply consistent font formatting. When enabled, all pasted content will have font family and size normalized. | | pasteFontFamily: string (default: 'Arial') | the font family to apply when paste preprocessing is enabled. Only used when pastePreprocessing is true. | | pasteFontSize: string (default: '11pt') | the font size to apply when paste preprocessing is enabled. Format should include unit (e.g., '11pt', '12px'). Only used when pastePreprocessing is true. | | baseHref: string | required - baseHref of the client application

Outputs

| Name | Description | | ---- | ----------- | | editorBecameDirty | emits when the editor content becomes dirty (modified) |

Sample

Template

Note this can be used like a normal form control using ngmodel, formControl, or formControlName.

```html
<cen-html-content-editor-basic
    #HtmlContentEditorBasic
    [sidebarMinimized]="trackedChangesAndCommentsSidebarMinimized"
    [enabledPlugins]="tinyMcePluginsEnabled"
    [baseHref]="this.config.baseHref">
</cen-html-content-editor-basic>
```

Component

This implements ControlValueAccessor so it should work with standard from control methods like patch, value, valueChanged, etc.

Output Signals

editorBecameDirty

Emits whenever the editor content becomes dirty (modified). This signal fires when the TinyMCE dirty event is triggered:

// In your component
onEditorDirty(): void {
  console.log('Editor content has been modified');
  // Handle dirty state...
}

<cen-html-content-editor-basic
    (editorBecameDirty)="onEditorDirty()"
    [baseHref]="this.config.baseHref">
</cen-html-content-editor-basic>

Advanced Features

Font Customization

You can customize the available font families and sizes in the editor toolbar:

fontFamilyOverride = 'Arial;Times New Roman;Courier New;Georgia';
fontSizeOverride = '8pt 10pt 12pt 14pt 16pt 18pt 20pt';

<cen-html-content-editor-basic
    [fontFamilyOverride]="fontFamilyOverride"
    [fontSizeOverride]="fontSizeOverride"
    [baseHref]="this.config.baseHref">
</cen-html-content-editor-basic>

Paste Preprocessing

Enable paste preprocessing to automatically normalize the font family and size of pasted content. This is useful when you want to maintain consistent formatting regardless of the source of the pasted content:

pastePreprocessing = true;
pasteFontFamily = 'Arial';
pasteFontSize = '11pt';

<cen-html-content-editor-basic
    [pastePreprocessing]="pastePreprocessing"
    [pasteFontFamily]="pasteFontFamily"
    [pasteFontSize]="pasteFontSize"
    [baseHref]="this.config.baseHref">
</cen-html-content-editor-basic>

When paste preprocessing is enabled:

• All pasted content will be processed before insertion
• Font family and size attributes from the source will be replaced with the specified values
• Tables and table-related elements will retain their original formatting
• The feature helps maintain document consistency and prevents formatting inconsistencies from external sources