动态加载js时,不能使用微小的mce

时间:2012-11-12 09:24:22

标签: tinymce initialization init dynamic-loading

我遇到了tinyMCE的问题,当我将<script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js">放到<head>,并将初始代码放在<textarea class="tinyMceEditor">之前时,它运行正常。 init代码是这样的:

                    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">

谷歌搜索,但没有发现任何相关的问题,任何人都遇到过这个问题?

任何建议都将受到赞赏。

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


谢谢你的帮助,我在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,只需在<script>中添加<head>标记,就可以使用tinyMCE,但是当我动态加载tinymce.js时,它不起作用。对此有什么想法?

2 个答案:

答案 0 :(得分:27)

经过一天的工作,终于找到了解决方案,只需把

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

之前

 tinymce.init();

然后可以正确地进行注射。

答案 1 :(得分:1)

我通过创建一个单独的coffee脚本文件解决了此问题。然后,我声明了下面带有窗口范围的函数以在视图中进行访问。

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编辑器。