动态加载js时无法邀请tinymce答案

【问题标题】：tiny mce can't be inited when load js dynamically动态加载js时无法邀请tinymce
【发布时间】：2012-10-31 17:19:12
【问题描述】：

我在使用 tinyMCE 时遇到问题，当我将 <script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"> 放入 <head> 并将初始化代码放在 <textarea class="tinyMceEditor"> 之前时，它工作正常。初始化代码是这样的：

                    tinyMCE.init({
                        mode : "specific_textareas",
                        editor_selector : "tinyMceEditor",
                        plugins : "inlinepopups,advlink",
                        convert_urls : false,
                        theme : "advanced",
                        theme_advanced_buttons1 : "link,unlink",
                        width: "602",
                        height: "175",
                        theme_advanced_statusbar_location : "none"});

但是现在，我想延迟加载 tiny_mce.js，当用户第一次点击按钮时，会加载 tiny_mce.js，然后将<textarea class="tinyMceEditor"> 附加到<body>，然后执行init 与之前的代码一起工作，但这一次，它不会初始化 tinyMCE 编辑器，它只显示<textarea class="tinyMceEditor">

google了一下，没找到相关的，有人遇到过这个问题吗？

任何建议将不胜感激。

我查看了 chrome web 开发者工具，发现如果我动态加载 tinymce.js，其他需要的 js，如 en.js、editor_template.js、editor_plugin.js 等将不会被加载。即使我将这些js文件添加到动态加载中，tinymce仍然无法启动。

感谢您的帮助，我在 firebug 中观看，并且在将 <textarea 附加到 <body> 之前加载了 tinymce.js，然后我附加了 <textarea>，然后执行 tinymce init()，我我正在使用 LazyLoad(jQuery 插件) 来动态加载 js 文件。

这就是我所做的

if(typeof TinyMCE == "undefined"){
    //dynamically load the tinymce.js
    LazyLoad(['tinymce.js'],function(){
        //callback function, called after tinymce is loaded
        $('body').append('<textarea class="TinyMceEditor"/>');
        tinyMCE.init({init settings});
    });
}

如果我不动态加载tinymce.js，只需在<head> 中添加<script> 标签，即可启动tinymce，但是当我动态加载tinymce.js 时，它不起作用。有什么想法吗？

【问题讨论】：

所以您的 onClick 按钮会加载外部 JS，将 textarea 添加到您的文档中，然后按该顺序运行 tinyMCE.init()？见stackoverflow.com/a/912713/830171
是的，我已经找到了解决方案。<br>只需在tinymce.init() 之前添加window.tinymce.dom.Event.domLoaded=true 就可以了。

标签： tinymce initialization init dynamic-loading

【解决方案1】：

折腾了一天，终于找到了解决办法，放了

 window.tinymce.dom.Event.domLoaded = true;

之前

 tinymce.init();

那么tinymce就可以正确启动了。

【讨论】：

伟大的发现！此外，您可能必须在调用 init() 之前像这样添加 js 根目录 - “tinymce.baseURL = '/static/js/tinymce/';”更多信息：stackoverflow.com/questions/3636309/…
我在 Require 和 Backbone 包装器中单击时初始化 tinymce 时遇到问题，但仅限于 Internet Explorer，甚至 ie10。这解决了它。非常感谢。
我已经尝试了 2 天的解决方案...谢谢！！
哦哇！是的，我现在也一直在看这个几天。在 SO 之前我们做了什么？ :o) 非常感谢，谢谢！
您好先生，我来自2年后。谢谢！你的回答救了我。

【解决方案2】：

我通过创建一个单独的咖啡脚本文件解决了这个问题。然后我在下面声明了具有窗口范围的函数以在视图中访问。

window.initialize_tiny_mce = () ->
  if (typeof tinymce != 'undefined' && tinymce != null)
    tinymce.remove();

  tinymce.init
    height: '180'
    menubar: false
    statusbar: false
    cleanup: true
    selector: '.new-tinymce-printable-html'
    plugins: [ 'autolink link image code lists advlist' ]
    toolbar: 'styleselect | bold underline italic | bullist numlist outdent indent | link image | code'
    browser_spellcheck: true
    setup: (editor) ->
      editor.on 'keyup', ->
        tinymce.triggerSave()
      editor.on 'change', ->
        console.log editor.getContent()
        return
      return

然后在部分视图中，我调用了这个函数：

:coffeescript
  initialize_tiny_mce()

现在动态创建的元素被分配了一个 tinymce 编辑器。

【讨论】：