如何获取使用 Angular4 编写的 TinyMCE 内容？

Question

单击提交按钮后，我需要将编写在 tinyMCE 编辑器中的内容存储在我的 html 页面上，但我不知道如何操作。我在我的 AppModule 中导入了 EditorComponent。

我的 component.html 中嵌入了以下编辑器：

<editor
   (onSaveContent)="somefunction()"
   [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',
       'save'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help | save'      
   }">
</editor>

我的 Component.Ts 文件中有一个名为 getcontent() { // } 的函数。我现在不知道该怎么做，因为其他在线主题专门使用 Javascript 或 PHP（我使用的是 Angular 4）

基本上，我有一个初始化为 str 的字符串，我需要在此处插入此内容来更新我的后端数据库。

在其他文章中，我看到他们使用类 tinyMCE 并在其上调用函数，但我无法在我的 Angular 应用程序中访问它。

但是，当我点击保存时，我可以运行 (onSaveContent)="somefunction()"；我只需要获取我写入字符串变量的内容

Answer 1

基于您提到EditorComponent 的事实，我假设您使用的是this package。在这种情况下，这很简单；您只需使用 ngModel 将 tiny mce 编辑器的值与组件中的属性进行双向绑定：

<editor
   (onSaveContent)="somefunction()"
   [(ngModel)]="html"
   [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',
       'save'
     ],
     toolbar:
       'undo redo | formatselect | bold italic backcolor | \
       alignleft aligncenter alignright alignjustify | \
       bullist numlist outdent indent | removeformat | help | save'

   }"></editor>

在你的组件中：

// String field to store our HTML
html = '<p>Hi, TinyMCE!</p>';
somefunction() {
  // Do something here.
  console.log(this.html);
}

这是working stackblitz example。