时间戳

首页 > 解决方案 > Angular6 & tinyMCE 编辑器

angular - Angular6 & tinyMCE 编辑器

问题描述

您好，我想将 tinyMCE 编辑器集成到 Angular 6 应用程序中。

我已经集成为以下线程，但是它给了我域未注册的消息。我想在不将它与具有很少基本功能的 API 密钥集成的情况下这样做。

在这里链接到 stackoverflow 在上面的线程中它说它可以使用模块加载器来完成，但我认为它是在 AngularJS 中给出的，而不是在 angular6 中给出的。

如果有人可以帮助我，那将是非常可观的。

标签： angular

解决方案

以下分步指南概述了在由 Angular CLI 管理的项目中加载 TinyMCE 和 TinyMCE-Angular 的过程。

使用 NPM 安装 TinyMCE

npm install --save tinymce

在您的 angular.json 中，将 tinymce 添加到全局脚本标签中。您的脚本列表可能如下所示：

"scripts": [
  "node_modules/tinymce/tinymce.min.js"
]

将 tinymce 皮肤、主题和插件添加到 angular.json 的 assets 属性中。这将允许 Tiny 延迟加载初始化所需的所有内容。

"assets": [
  { "glob": "**/*", "input": "node_modules/tinymce/skins", "output": "/tinymce/skins/" },
  { "glob": "**/*", "input": "node_modules/tinymce/themes", "output": "/tinymce/themes/" },
  { "glob": "**/*", "input": "node_modules/tinymce/plugins", "output": "/tinymce/plugins/" }
]

最后，配置编辑器。如有必要，设置 base_url 和 suffix 选项。

<editor [init]="{
  base_url: '/tinymce', // Root for resources
  suffix: '.min',       // Suffix to use when loading resources
  plugins: 'lists advlist',
  toolbar: 'undo redo | bold italic | bullist numlist outdent indent'
}"></editor>

更多信息在这里：https ://github.com/tinymce/tinymce-angular

推荐阅读