Initialize 3rd party library in Angular 2

Question

Actually I'm trying to implement a WYSIWYG editor on my application. The sample on the website have this:

<!DOCTYPE html>
<html>
<head>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Easy! You should check out MoxieManager!</textarea>
</body>
</html>

The problem is: how to programatically call the init method of the library using Angular 2 ?

score 2 · Accepted Answer · edited May 23 '17 at 12:32

2

In a component (the root component) add

  ngOnInit():any {
    tinymce.init(
      {
        selector: ".tinyMCE",
      })
  }

See also angular2 wysiwyg tinymce implementation and 2-way-binding

edited May 23 '17 at 12:32

Community

1
1

answered Apr 28 '16 at 07:18

Günter Zöchbauer

623,577
216
2,003
1,567

ty ! in fact I built this implementation, but my vs code show me [ts] Cannot find name 'tinymce' - and I though that the link you suggested could be outdated. but I executed this..and it's really works ! ty ! – Marco Jr Apr 28 '16 at 07:46

score 0 · Answer 2 · edited May 23 '17 at 12:32

In fact, you need to put your textarea into a component that you bootstrap. Don't forget that Angular2 uses a component-based approach and the HTML entry file isn't "evaluated". Only the templates in components.

So you need to do this in your HTML file:

<html>
  <head>
    <!-- includes -->
    <!-- SystemJS configuration -->
  </head>
  <body>
    <my-app></my-app>
  </body>
</html>

And bootstrap the component that has the my-app selector:

bootstrap(AppComponent);

Then you can implement a custom directive to apply the tinymce behavior of textarea field:

@Component({
  selector: 'my-app',
  (...)
}) 
export class AppComponent implements OnInit{
  constructor(){}
  ngOnInit():any {
    tinymce.init({
      selector: "[tinymce]"
    });
  }
}

Simply add the tinymce attribute (the selector of your directive) to the corresponding textarea:

@Component({
  (...)
  template: `
    <textarea tinymce style="height:300px"></textarea>
  `
})
export class AppComponent {
  (...)
}

Note that you could go further to leverage form support (control and ngModel). See this question:

angular2 wysiwyg tinymce implementation and 2-way-binding

Initialize 3rd party library in Angular 2

2 Answers2

Linked