Question

实际上我正试图在我的应用程序上实现WYSIWYG编辑器。网站上的样本有：

$package = $package+$component+"=[{"+$componentField+":"+$componentValue+"}" 

Write-Host $package

问题是：如何使用Angular 2以编程方式调用库的init方法？

Answer 1

在组件（根组件）中添加

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

另见angular2 wysiwyg tinymce implementation and 2-way-binding

Answer 2

实际上，您需要将textarea放入引导程序的组件中。不要忘记Angular2使用基于组件的方法，并且HTML条目文件没有被评估＆＃34;。只有组件中的模板。

因此，您需要在HTML文件中执行此操作：

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

引导具有my-app选择器的组件：

bootstrap(AppComponent);

然后，您可以实现自定义指令以应用textarea字段的tinymce行为：

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

只需将tinymce属性（指令的选择器）添加到相应的textarea：

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

请注意，您可以进一步利用表单支持（control和ngModel）。看到这个问题：

angular2 wysiwyg tinymce implementation and 2-way-binding

在Angular 2中初始化第三方库

2 个答案: