如何使用 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

，我假设您正在使用这个包。在这种情况下，就很简单了；您只需使用

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);
}

这是一个工作 stackblitz 示例。

Answer 2

使用

[(ngModel)]="content"