CODEWITHSUNDEEP
javascriptjquerytinymce
James Nine
James Nine

Reputation: 2618

is there a way to load an external javascript file inside the tinymce iframe?

Is there a simple way to load external javascript that will work inside of a TinyMCE iframe?

The only thing I've found (that might be the answer) is this: http://www.tinymce.com/wiki.php/API3:class.tinymce.dom.ScriptLoader

But I'm not sure how to load this properly or if it works at all. I tried to load it before and after the tinymce.init directive, even inside it, but nothing seems to work. Just wondering how to intiailize the "ScriptLoader" function.

Upvotes: 5

Views: 7879

Answers (3)

zukayu
zukayu

Reputation: 111

Another Approach to definitely try on is mentioned below, Now after the editor is initialized, we can access the elements of the iframe and insert or js there. Please note, that if you want to save the script paths with the html source code, then add the scripts in side body else I am adding it in head section because I just want to preview the things.

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'
                            }
                        );
                  
                  
              })
              
          }
});

By this, you can add Multiple JS Files once the editor is fully initialized.

Upvotes: 0

Nathan Hazzard
Nathan Hazzard

Reputation: 1443

In order to do this with the jquery plugin, I needed to do this:

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

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

    ...
  });
});

Upvotes: 1

Thariama
Thariama

Reputation: 50832

You may use the scriptloader using the setup init configuration paramter

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');

      });
   }
});

Upvotes: 8

Related Questions