如何在Tinymce的iframe中加载外部JavaScript文件？

Question

有没有一种简单的方法来加载外部JavaScript，以便在TinyMCE iframe内起作用？

我找到的唯一可能是答案的东西是这个：http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.ScriptLoader 但我不确定如何正确地加载它或者它是否起作用。我尝试在tinymce.init指令之前和之后甚至在其中加载它，但似乎都不起作用。只想知道如何初始化“ScriptLoader”函数。

- James Nine

Answer 1

您可以使用设置初始化配置参数来使用ScriptLoader。

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {

        // Load a script from a specific URL using the global script loader
        tinymce.ScriptLoader.load('somescript.js');

        // Load a script using a unique instance of the script loader
        var scriptLoader = new tinymce.dom.ScriptLoader();

        scriptLoader.load('somescript.js');

      });
   }
});

- Thariama

---

加载的脚本将使用ScriptLoader在父window上下文中执行。 - David Riccitelli

@Thariama，我已经添加了您建议的方法，但是当我尝试从编辑器 iframe 和预览模式中加载的 js 文件中调用函数时，检查元素显示找不到该函数。 - Manu

@Manu：你能展示一些代码吗？你目前尝试了什么？ - Thariama

Answer 2

为了使用jquery插件实现这一点，我需要这样做：

$('textarea').tinymce({
...
  setup: function(editor) {

    var scriptLoader = new tinymce.dom.ScriptLoader();
    scriptLoader.add("Your first script");
    scriptLoader.add("Your second script");
    scriptLoader.loadQueue();

    ...
  });
});

- Nathan Hazzard

Answer 3

另一种绝对值得尝试的方法如下所述，现在编辑器已经初始化完成，我们可以访问iframe的元素并插入或js。请注意，如果您想将脚本路径与HTML源代码保存在一起，则将脚本添加到body中，否则我将其添加到head部分，因为我只想预览这些内容。

tinymce.init({
    ...,
    setup : function(ed){
  
              ed.on('init',function(){
                  console.log('Initialized')
                  var head = ed.dom.select('head')[0]
                  //for body //var body = ed.dom.select('body')[0]
                  ed.dom.add(
                            head,
                            'script',
                            {
                                src: "/path/to/file1.js",
                                type: 'text/javascript'
                            }
                        );
                  
                  ed.dom.add(
                            head,
                            'script',
                            {
                                src: "/path/to/file1.js",
                                type: 'text/javascript'
                            }
                        );
                  
                  
              })
              
          }
});

通过这种方式，您可以在编辑器完全初始化后一次添加多个JS文件。

- zukayu