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:

npm i html-content-editor --save

Compatibility

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

API

Properties

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 |

Functions

| 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

Template

```html
<cen-html-content-editor
    #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">
</cen-html-content-editor>
```

Component

```ts
private destroy$ = new Subject<void>();
public currentUser = this.sessionService.currentUser$.value;
public currentContent: ContentSummaryDto;
public formGroup: FormGroup<ModelForm> = 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<CreateEditContentModel>;
//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();
}
```