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

标签 javascript tinymce tinymce-4

我正在尝试像这样动态加载 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 文件的正确方法是什么?

最佳答案

如果您将 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
      ...
    });

关于javascript - Tinymce 错误 - 动态加载时无法加载插件 js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38031356/

相关文章:

javascript - 如何刷新 ko 多选组件中的 'options' 绑定(bind)?

javascript - 计算图像的位置以跟随滚动条

javascript - angularjs ui-view元素不呈现内容

javascript - 动态加载 TinyMCE - 错误的插件、主题路径

javascript - 使用 setNode() 更新选定节点时出现 TinyMCE 4 节点重复问题

javascript - TinyMCE 在加载 AJAX 的 DIV 中重新初始化后消失

javascript - 如何在 android phonegap 中将 Json 对象从 js 传递到 java?

android - 如何使用 tinymce 去除 Android 中的灰色覆盖

java - 如何在 Selenium 中使用 CSS 选择器找到 TinyMCE 编辑器的主体?

html - 强制 TinyMCE 与父级高度相同