HtmlContentEditor

HTML Content Editor based on TinyMCE Editor with extensions for tracked changes, comments, and SUNSI.

- Installation
- Compatibility
- API
- Properties
- Inputs
- Outputs
- Functions
- Sample
- Template
- Component

Installation

User npm:

``sh
npm i html-content-editor --save
`

$3

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

API

$3

#### Inputs

| Name | Description |
| ---- | ----------- |
| initialContent: ContentSummaryDto | content that will be loaded into the editor at start |
| unsavedChanges: ContentUnsavedChanges | not required but can be used to track if there are unsaved changes to content, tracked changes and comments |
| editorControl: FormControl | control in the formGroup so that the editor can report the control status |
| isEditable: bool | allows disabling control |
| sidebarMinimized: bool | sets starting position of the sidebar. Default is expanded |
| enabledPlugins: string[] | plugins that are enabled. Use TinyMceOptionalPlugins to get names |
| currentUser: BasicUser | Id, FirstName, LastName |
| baseHref: string | baseHref of the client application |

#### Outputs

| Name | Description |
| ---- | ----------- |
| editorSuccessNotification: EventEmitter | event emitter for notifications from within the editor to be used in the notification system of the consuming app |
| editorBecameDirty: EventEmitter | emits event when controls has become dirty |

$3

| Name | Description |
| ---- | ----------- |
| HtmlContentEditor.populateEditor(ContentSummaryDto) | repopulate the editor so that Ids for new tracked changes or comments are updated |
| ModelMappings.mapContentSummaryDtoToCreateEditContentModel(ContentSummaryDto): CreateEditContentModel | converts ContentSummaryDto to CreateEditContentModel |
| ModelMappings.mapCommentDetailsDtoToCreateEditCommentModel(comment: ContentCommentDetailsDto): CreateEditCommentModel | converts ContentCommentDetailsDto to CreateEditCommentModel |

Sample

$3

`html
#htmlContentEditor
[initialContent]="model?.Content"
[unsavedChanges]="unsavedChanges"
[editorControl] = "formGroup.controls?.Content"
[isEditable]="isEditable"
[sidebarMinimized]="trackedChangesAndCommentsSidebarMinimized"
[enabledPlugins]="tinyMcePluginsEnabled"
[currentUser]="{Id: currentUser.Id, FirstName: currentUser.NameFirst, LastName: currentUser.NameLast}"
[baseHref]="this.config.baseHref">

`

$3

`ts
private destroy$ = new Subject();
public currentUser = this.sessionService.currentUser$.value;
public currentContent: ContentSummaryDto;
public formGroup: FormGroup = this.fb.group({modelId: [0], editorControl: [null]});

@ViewChild('htmlContentEditor') htmlContentEditor: HtmlContentEditorComponent;
public unsavedChanges: ContentUnsavedChanges;
//Control is responsible for telling the form if its pristine, dirty, etc
public editorControl: FormControl;
//Where custom plugins are enabled. Remove a plugin will prevent it from loading and prevent toolbar items from appearing.
public tinyMcePluginsEnabled: string[] = [TinyMceOptionalPlugins.Sunsi, TinyMceOptionalPlugins.TrackedChanges, TinyMceOptionalPlugins.Comments, TinyMceOptionalPlugins.MathType];

constructor(
private activatedRoute: ActivatedRoute,
private fb: FormBuilder,
public modelService: ModelService,
public sessionService: SessionService,
public configService: ApplicationConfigService,
public snackBarService: SnackBarService) {
this.config = this.configService.Settings.getValue();
}

ngOnInit(): void {
this.modelId = +this.activatedRoute.snapshot.params['id'];
this.loading = true;
this.modelService.getModelContent(this.modelId).pipe(
takeUntil(this.destroy$),
tap(response => {
this.currentContent = response;
if (this.currentContent) {
this.formGroup = this.fb.group({
modelId: [this.modelId],
editorControl: [ModelMappings.mapContentSummaryDtoToCreateEditContentModel(this.currentContent)]
});
}
this.loading = false;
})
).subscribe();

//When deleting SUNSI a notification string is emitted
this.htmlContentEditor?.editorSuccessNotification.pipe(
takeUntil(this.destroy$),
tap(notification => {
this.snackBarService.success(notification);
}));
}

ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}

public saveChanges(): void {
this.saving = true;
this.modelService.updateContentOnModel(this.raiDocId, this.raiBackgroundForm.controls.editorControl.value)
.pipe(
takeUntil(this.destroy$),
tap(updatedContent => {
this.saving = false;
this.currentContent = updatedContent;
//Must repopulate the editor so that all the
//tracked changes, comments etc are updated with ids from backend.
this.htmlContentEditor.populateEditor(updatedContent);
this.htmlContentEditor.markAsPristine();
})
)
.subscribe();
}
``