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

Question

I'm trying to load TinyMCE dynamically like so (on clicking a button): 我正在尝试动态加载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);
});

With this configuration, tinyMCE fails to initialize. 使用此配置，tinyMCE无法初始化。 In the console I see several 404 errors, each with a message like this: 在控制台中，我看到几个404错误，每个错误都有这样的消息：

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

Sure on checking in the console the JS file tinymce.min.js loads correctly. 当检查控制台时，JS文件tinymce.min.js正确加载。 Also, the /path/to/mce4/plugins/textcolor/plugin.js does not exist. 此外， /path/to/mce4/plugins/textcolor/plugin.js不存在。 But /path/to/mce4/plugins/textcolor/plugin.min.js exists, and this is true for all the js files involved (ie the .min.js files are there, but tinyMCE for whatever reason is looking for the .js files). 但是/path/to/mce4/plugins/textcolor/plugin.min.js存在，对于所涉及的所有js文件都是如此（即.min.js文件在那里，但无论出于何种原因，tinyMCE都在寻找.js文件）。

Now, when I load tinyMCE in a script tab in the <head> , there's no problem at all, and everything works well. 现在，当我在<head>的脚本选项卡中加载tinyMCE时，根本没有问题，一切正常。

What could be causing this error, and how am I supposed to fix it? 可能导致此错误的原因是什么，我应该如何解决？ If this is the expected behaviour of tinyMCE, what is the correct way to dynamically load its js file for the scenario such as I am working on? 如果这是tinyMCE的预期行为，那么为我正在处理的场景动态加载其js文件的正确方法是什么？

Answer 1

If you are using angular2+ with angular-cli, following might help you. 如果您使用angular2 + with angular-cli，以下内容可能会对您有所帮助。 Lets say you want to add a plugin named autoresize . 假设您要添加名为autoresize的插件。 Check if this plugin is present in node_modules/tinymce/plugins . 检查node_modules/tinymce/plugins是否存在此插件。 If yes, do following: 如果是，请执行以下操作：

1. In angular-cli.json : 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. In the intializing component: 2. 在初始化组件中：

tinymce.init({

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

Answer 2

I can not tell you what is wrong with your code, but this works for me (TinyMCE 4.x) 我不能告诉你你的代码有什么问题，但这对我有用（TinyMCE 4.x）

I put the path to tinymce.min.js like this: 我把这条路径放到了tinymce.min.js：

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

So it loads with the page load. 所以它加载页面加载。 Not to be loaded dynamically. 不动态加载。

Then I made a function defined: 然后我定义了一个函数：

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

Then I made a onclick that run: IactivateMCE() AFTER the dynamic content had been added to the site ( I have a function that first add dynamic content to the site, then initialize TinyMCE). 然后我做了一个运行的onclick：IactivateMCE（）在将动态内容添加到站点之后（我有一个函数，首先向站点添加动态内容，然后初始化TinyMCE）。

Hope this can benefit you :-) 希望这可以让你受益:-)

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

问题描述

2 个解决方案

解决方案1
1 2017-08-27 18:34:46

解决方案2
0 2016-07-01 22:55:47

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

问题描述

2 个解决方案

解决方案1 1 2017-08-27 18:34:46

解决方案2 0 2016-07-01 22:55:47

解决方案1
1 2017-08-27 18:34:46

解决方案2
0 2016-07-01 22:55:47