Tinymce 错误 - 动态加载时无法加载插件 js 文件答案

【问题标题】：Tinymce Error - Failed to load plugin js files when dynamically loadedTinymce 错误 - 动态加载时无法加载插件 js 文件
【发布时间】：2016-06-25 17:55:50
【问题描述】：

我正在尝试像这样动态加载 TinyMCE（单击按钮）：

$.getScript('path/to/mce4/tinymce.min.js', function(){
    var def = {
        selector: 'textarea',
        body_class: 'sp-mce-editor',
        content_css : "path/to/styles/mce.css",
        plugins: ['advlist autolink lists link image charmap print preview hr anchor pagebreak searchreplace wordcount visualblocks visualchars code insertdatetime media nonbreaking table contextmenu directionality emoticons template paste textcolor fullscreen autoresize'],
        toolbar: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | fontsizeselect forecolor backcolor | preview fullscreen | template",
        toolbar_items_size: 'small',
        relative_urls : false,
        convert_urls : true,
        external_plugins: { "nanospell": "path/to/mce4/nanospell/plugin.js" },
        nanospell_server:"php",
        file_browser_callback: RoxyFileBrowser,
        init_instance_callback: (typeof processEditor != 'undefined' ? processEditor : null)
   };


    tinymce.init(def);
});

使用此配置，tinyMCE 无法初始化。在控制台中，我看到几个 404 错误，每个错误都有这样的消息：

Failed to load: /path/to/mce4/plugins/textcolor/plugin.js

确定在控制台中检查 JS 文件 tinymce.min.js 正确加载。此外，/path/to/mce4/plugins/textcolor/plugin.js 不存在。但是/path/to/mce4/plugins/textcolor/plugin.min.js 存在，并且所有涉及的js 文件都是如此（即.min.js 文件在那里，但tinyMCE 出于某种原因正在寻找.js 文件）。

现在，当我在 <head> 的脚本选项卡中加载 tinyMCE 时，完全没有问题，一切正常。

什么可能导致这个错误，我应该如何解决它？如果这是 tinyMCE 的预期行为，那么为我正在处理的场景动态加载其 js 文件的正确方法是什么？

【问题讨论】：

标签： javascript tinymce tinymce-4

【解决方案1】：

如果您将 angular2+ 与 angular-cli 一起使用，以下内容可能会对您有所帮助。假设您要添加一个名为 autoresize 的插件。检查node_modules/tinymce/plugins 中是否存在此插件。如果是，请执行以下操作：

1.在 angular-cli.json 中：

"styles": [
        "../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/autoresize/plugin.js",/add this/**
       "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ],

2.在初始化组件中：

tinymce.init({

     ...
      plugins: ['link', 'paste', 'table','**autoresize**'],
      autoresize_bottom_margin: 50,//this is plug in requirement
      ...
    });

【讨论】：

【解决方案2】：

我不能告诉你你的代码有什么问题，但这对我有用（TinyMCE 4.x）

我把指向 tinymce.min.js 的路径是这样的：

<script src="/tinymce/tinymce.min.js"></script>

所以它会随着页面加载而加载。不动态加载。

然后我定义了一个函数：

function IactivateMCE() {
   tinymce.init({
     selector: "div.c10",
     code continue
   })
}

然后我做了一个 onclick 运行：IactivateMCE() AFTER 动态内容添加到站点（我有一个功能，首先将动态内容添加到站点，然后初始化 TinyMCE）。

希望这可以使您受益:-)

【讨论】：

感谢您的回答。当然，我知道您的模式有效，并且实际上在应用程序的其他地方以这种方式使用它。但是您会同意我的观点，即在某些情况下动态加载会带来某些优势。这就是这个问题的落脚点
我不明白您为什么要动态加载 tinymce.min.js。但是，如果您这样做，则更多的是一个问题，即如何在页面加载后动态加载任何 javascript。对？添加新内容后必须动态加载的 init，如前所述，这很容易完成。