角TinyMCE积分

Question

我遵循将TinyMCE与Angular：https://www.tinymce.com/docs/integrations/angular2/集成的官方文档。

现在一切正常，但是TinyMCE的插件加载到应用程序启动中，但我希望它从/src/assets/tinymce异步加载。问题是，

当我需要TinyMCE时，我如何异步加载它？

~为语法错误道歉

在.angular-cli.json中，我有scripts数组：

      "scripts": [
        "../node_modules/tinymce/tinymce.js",
        "../node_modules/tinymce/themes/modern/theme.js",
        "../node_modules/tinymce/plugins/link/plugin.js",
        "../node_modules/tinymce/plugins/paste/plugin.js",
        "../node_modules/tinymce/plugins/table/plugin.js",
        "../node_modules/tinymce/plugins/image/plugin.js",
        "../node_modules/tinymce/plugins/imagepicker/plugin.js",
        "../node_modules/tinymce/plugins/imagetools/plugin.js",
        "../node_modules/tinymce/plugins/advlist/plugin.js",
        "../node_modules/tinymce/plugins/autolink/plugin.js",
        "../node_modules/tinymce/plugins/lists/plugin.js",
        "../node_modules/tinymce/plugins/charmap/plugin.js",
        "../node_modules/tinymce/plugins/print/plugin.js",
        "../node_modules/tinymce/plugins/preview/plugin.js",
        "../node_modules/tinymce/plugins/hr/plugin.js",
        "../node_modules/tinymce/plugins/anchor/plugin.js",
        "../node_modules/tinymce/plugins/pagebreak/plugin.js",
        "../node_modules/tinymce/plugins/searchreplace/plugin.js",
        "../node_modules/tinymce/plugins/wordcount/plugin.js",
        "../node_modules/tinymce/plugins/visualblocks/plugin.js",
        "../node_modules/tinymce/plugins/visualchars/plugin.js",
        "../node_modules/tinymce/plugins/fullscreen/plugin.js",
        "../node_modules/tinymce/plugins/insertdatetime/plugin.js",
        "../node_modules/tinymce/plugins/media/plugin.js",
        "../node_modules/tinymce/plugins/nonbreaking/plugin.js",
        "../node_modules/tinymce/plugins/save/plugin.js",
        "../node_modules/tinymce/plugins/contextmenu/plugin.js",
        "../node_modules/tinymce/plugins/directionality/plugin.js",
        "../node_modules/tinymce/plugins/template/plugin.js",
        "../node_modules/tinymce/plugins/textcolor/plugin.js",
        "../node_modules/tinymce/plugins/colorpicker/plugin.js",
        "../node_modules/tinymce/plugins/textpattern/plugin.js",
        "../node_modules/tinymce/plugins/toc/plugin.js",
        "../node_modules/tinymce/plugins/code/plugin.js",
        "../node_modules/tinymce/plugins/autoresize/plugin.js",
        "../node_modules/tinymce/plugins/help/plugin.js"
      ],

这些脚本是TinyMCE的插件

Answer 1

在组件的顶部声明以下2：

declare var tinymce: any;
const url = '//cdn.tinymce.com/4/tinymce.min.js';

使用此函数在组件的onInit函数中加载脚本：

loadScript() {
    let scriptTag = document.querySelector('script[src="//cdn.tinymce.com/4/tinymce.min.js"]');
    let node;
    if (!scriptTag) {
      node = document.createElement('script');
      node.src = url;
      node.type = 'text/javascript';
      node.async = true;
      node.charset = 'utf-8';
      document.getElementsByTagName('head')[0].appendChild(node);
    }
  }

然后使用以下函数加载tinymce：

loadTinyMCE() {
    if (tinymce)
      tinymce.init({
        selector: '#tinymce',
        skin_url: 'assets/skins/lightgray',
        plugins: ['paste', 'link', 'autoresize','image'],
        setup: editor => {
          this.editor = editor;
        }
      })
  }

最后在object上销毁tinymce对象：

ngOnDestroy() {
    tinymce.remove();
  }

这可能是一种糟糕的方法，但它可以帮助我避免在加载应用程序时加载脚本，并使我能够只在需要的时候加载脚本。