Two editor components on the same page. Second connects to the wrong datasource

[StephanBiegel]

I use the latest version of the tinyMCE angular integration.

Angular 12.2.4 > Error also existed in Angular 9 we used before.

tinymce-angular@4.2.4

If I use two editors inside the same component with 2 different IDs on the editor tag and 2 different angular bindings, then the second editor is also bound to the data source of the first one.

Means the second editor also shows and changes the first data source. If I switch from editor to textarea, the 2 show different data.

The code I used inside the component

<editor  
   id="emailheader" 
   apiKey="XXXXXX" 
   [init]="settings.tinyMceInit"
   [(ngModel)]="currentSelected.header">
</editor>

<editor
   id="emailfooter"
   apiKey="XXXXXX" 
   [init]="tinyMceInit"
   [(ngModel)]="currentSelected.footer">
</editor>

The tinyMCE settings if needed

tinyMceInit = {
      selector: 'editor',
      forced_root_block : false,
      force_br_newlines : true,
      force_p_newlines : false,
      content_css : 'assets/tinymce.css',
      plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen noneditable',
        'insertdatetime media table paste'
      ],
      toolbar_items_size : 'small',
      menubar: ' edit view format table tools custom', // file insert tools
      menu: {
        file: {title: 'File', items: 'newdocument'},
        edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
        insert: {title: 'Insert', items: 'link media | template hr'},
        view: {title: 'View', items: 'visualaid'},
        format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
        table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
        tools: {title: 'Tools', items: 'code'},
        custom: {title: 'Textbausteine', items: this.tinyMceMenuItems}
      },
      toolbar: 'insertfile undo redo | styleselect | removeformat  | bold italic forecolor  | alignleft aligncenter alignright alignjustify | bullist numlist | link ',
    };

And here what it looks like in the browser

[exalate-issue-sync[bot]]

Ref: INT-2652

[jscasca]

Hi @StephanBiegel

I could not reproduce the issue in the following sandbox: https://codesandbox.io/s/tinymce-angular-forked-8hdhm?file=/src/app/app.component.html

Can you send over a reproduction?

[StephanBiegel]

Thanks for your answer.

Then it must have to do something with my environment the component is running in. I try to integrate your code into an empty site and test around why in my case it did not work.

[StephanBiegel]

Found it.

I had this in my tinyMceInit settings

  selector: 'editor',

and this caused the problem. If I add the line to your sandbox, I get the same behavior. Thanks so much for your help.

Greetings Stephan

[jscasca]

Glad we could help :)