tinymce / tinymce-angular

Official TinyMCE Angular Component
MIT License
324 stars 93 forks source link

Editor not rendered on downgradeComponent from Angular 9 to AngularJS #201

Closed mikykonst closed 2 years ago

mikykonst commented 3 years ago

I try to insert Editor as Angular 9 component into AngularJS as directive.

directive('emailForm', downgradeComponent({component: EmailComponent, downgradedModule: 'EditorModule'}))

But its empty on the screen and there are no errors.

image image

arturovt commented 2 years ago

Hey, I've just tried to downgrade the component that renders the editor and it works perfectly:

@Component({
  template: `
    <editor
      [init]="{
        height: 500,
        menubar: false,
        plugins: [
          'advlist autolink lists link image charmap print preview anchor',
          'searchreplace visualblocks code fullscreen',
          'insertdatetime media table paste code help wordcount'
        ],
        toolbar:
          'undo redo | formatselect | bold italic backcolor |       alignleft aligncenter alignright alignjustify |       bullist numlist outdent indent | removeformat | help'
      }"
    ></editor>
  `,
})
export class EditorWrapperComponent implements OnInit {
  @ViewChild(EditorComponent, { static: true }) editor!: EditorComponent;

  ngOnInit(): void {
    console.log('editor = ', this.editor);
  }
}

@NgModule({
  imports: [EditorModule],
  declarations: [EditorWrapperComponent],
})
export class EditorWrapperModule {}

declare const angular: typeof import('angular');

angular
  .module('tinymce-test', [])
  .directive(
    'editorWrapper',
    downgradeComponent({ component: EditorWrapperComponent }) as angular.IDirectiveFactory,
  );

@NgModule({
  imports: [BrowserModule, UpgradeModule],
})
export class AppModule implements DoBootstrap {
  constructor(private upgrade: UpgradeModule) {}

  ngDoBootstrap(): void {
    this.upgrade.bootstrap(document.body, ['tinymce-test'], { strictDi: true });
  }
}

platformBrowserDynamic().bootstrapModule(AppModule);

Result:

image

image


I'm not sure if anyone will be able to help you until a reproducible example is provided. At least I wasn't able to reproduce the described behavior, as you can see from my screens.

exalate-issue-sync[bot] commented 2 years ago

Ref: INT-2728

jscasca commented 2 years ago

I will be closing this but happy to open if anybody can provide a simple reproduction of the issue