javascript - Angular TinyMCE 集成

Question

我按照官方文档将 TinyMCE 与 Angular 集成:https://www.tinymce.com/docs/integrations/angular2/ .

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

How can I load TinyMCE asynchronously when I need it?

~ 为语法错误道歉

在 .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

在组件的顶部声明这两个:

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

最后在 ngdestroy 上销毁 tinymce 对象:

ngOnDestroy() {
    tinymce.remove();
  }

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