如何在Angular2中使用TinyMCE_Angular_Tinymce

如何在Angular2中使用TinyMCE

angular tinymce

如何在Angular2中使用TinyMCE,angular,tinymce,Angular,Tinymce,我有一个JavaWeb应用程序（使用Spring），它有一个基于JSP的GUI，使用TinyMCE的本地实例。现在我想用Angular替换JSP 以下是我得到的： My index.html如下所示： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Angular Client</title&

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

以下是我得到的： My 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>

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

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

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

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

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

我猜这是因为您使用了元素中的内容，但是需要将其传递给initValue属性。也可能你的一些initproperty是假的。我已经向您介绍了tinymce的工作解决方案，该解决方案还显示了如何获得组件的输出：

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