Issue Loading Dynamic Templates into Text Editor (TinyMCE) via Angular Resolver

Question

I am attempting to inject dynamic templates into my tinyMCE configuration prior to loading the element. The reason for this is because I want my users to save templates on their own and be able to utilize the templates whenever they access the editor.

Currently I have tried to use a resolver, but it appears that the editor will not load when I attempt to set the template configuration of the editor to the variable that is set after the resolver is initiated.

Resolver Code

  resolve(): Observable<AnalyticsDataType[]> {
    this.userData = this.authenticationService.getToken();
    return this.campaignTemplateService.getEditorTemplates(this.userData.ID);
  }

HTML Configuration

<div class="text-area">
   <editor
   ngIf="isLoaded"
   id = 'file-picker' 
   [apiKey]="tinyMCEAPIKey"
   initialValue="<p></p>"
   [init]="tinyMCEConfig"
   [(ngModel)]="htmlContent" 
   formControlName="body" ></editor>
</div>

Angular Component ngOnInit

ngOnInit(): void {
   this.textEditorTemplates = this.route.snapshot.data['textEditorTemplates'];
}

Angular Component configuration variable

  tinyMCEConfig = {
    height: 500,
    selector: 'editor#file-picker',
    image_title: true,
    automatic_uploads: true,
    images_upload_url: this.postUploadImageRoute(),
    file_picker_types: 'image',
    
    menubar: 'file view insert format tools table help',
    
    plugins: [
      'preview paste importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons'
    ],
    toolbar: ['undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft aligncenter alignright alignjustify | outdent indent |  numlist bullist | forecolor backcolor removeformat | pagebreak | charmap emoticons | fullscreen  preview save print | insertfile image media template link anchor codesample | ltr rtl'],
    image_advtab: true,
    image_list: [],
    importcss_append: true,
    image_caption: true,
    quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote quickimage quicktable',
    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
    templates: this.textEditorTemplates <-- This is where I am setting the templates
  };;;

Answer 1

You may need to move the template code to an earlier line. Specifically before the HTML Configuration or Resolver code.

If I have time later today, I will take a look at what the specific code should be doing. I have limited experience with HTML (I only have one website), but I will try to help.