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
  };;;

kefuyuehan · Accepted Answer · 2022-04-19 14:57:41Z

0

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.

edited Apr 19, 2022 at 14:57

answered Apr 19, 2022 at 14:12

kefuyuehan

518 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

kefuyuehan Over a year ago

I fixed the issue, @Community

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related