如何在 Angular2 中使用 TinyMCE答案

【问题标题】：How to use TinyMCE in Angular2如何在 Angular2 中使用 TinyMCE
【发布时间】：2020-11-24 14:06:54
【问题描述】：

我有一个 Java Web 应用程序（使用 Spring），它带有基于 JSP 的 GUI，使用 TinyMCE 的本地实例。现在我想用 Angular 替换 JSP。

这是我得到的：我的 index.html 看起来像这样：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Angular Client</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script type="text/javascript" src="../editor/tinymce.full.min.js"></script> <!-- Path to local instance of TinyMCE -->
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

我是这样安装 TinyMCE 包的：

 $ npm install --save @tinymce/tinymce-angular

并在我的 app.module.ts 中添加了来自 @tinymce/tinymce-angular 的 EditorModule。在我的一个组件的 html 文件中，我使用了这一行：

<editor id="editedCorporateAction" [init]="initData">{{ editor.editor_content }}</editor>

我在 ngOnInit() 的附属 TypeScript 文件中定义 initData：

this.initData = {
      init_instance_callback: (editor) => {
        ///
      },
      selector : '#editedCorporateAction',
      content_css : this.editor.content_css,
      skin_url : this.editor.skin_url,
      height : '100%',
      object_resizing : false,
      element_format : 'xhtml',
      language : this.getEditorLanguage(this.editor.locale_language),
      plugins : this.getPlugins(),
      statusbar : false,
      menubar : false,
      browser_spellcheck : !/\bEdge\/14\b/.test(navigator.userAgent), /* Spell checking works very badly in Edge 14! */
      toolbar : this.getToolbarConfig(),
      define_text_template_url : this.editor.define_text_template_url,
      list_text_template_categories_and_todogroups_url : this.editor.list_text_template_categories_and_todogroups_url,
      search_todo_group_url : this.editor.search_todo_group_url,
      /// and more
};

现在页面加载没有任何错误或异常，但是编辑器没有初始化。我究竟做错了什么？我做了很多谷歌搜索，但我只找到了使用 TinyCloud 的项目的教程。

编辑：我使用的是 TinyMCE 版本 4.5.9

【问题讨论】：

标签： angular tinymce

【解决方案1】：

我猜这是因为您使用了元素内部的内容，但它需要传递给 initValue 属性。也可能您的某些 initPropertys 是错误的。我给你做了一个stackbliz，它有一个tinymce的工作解决方案，它还展示了如何获取组件的输出： https://stackblitz.com/edit/angular-ivy-jolqrz

【讨论】：