load tinymce on demand by using jquery

Question

This is my script:

$.ajaxSetup({async: false});
$.getScript('http://www.mydomain.com/dev/js/tinymce/tiny_mce.js', function(){
    tinyMCE.init({
        document_base_url : "http://www.mydomain.com/dev/js/tinymce/",
        [...],
    });
});
$.ajaxSetup({async: true});

It load tiny_mce.js success. But when init tinymce in callback, tinymce load 2 following scripts with incorrect path:

http://www.mydomain.com/dev//langs/en.js
http://www.mydomain.com/dev//themes/advanced/editor_template.js

Even I use document_base_url or not, tinymce still load above path.

how exactly do you call the callback?

Thariama
– Thariama

2010-09-06 05:28:59 +00:00
Commented Sep 6, 2010 at 5:28 — Thariama
– Thariama, Commented Sep 6, 2010 at 5:28
Read Here : tinymce.moxiecode.com/tryit/jquery_version.php

DJafari
– DJafari

2011-04-24 10:04:50 +00:00
Commented Apr 24, 2011 at 10:04 — DJafari
– DJafari, Commented Apr 24, 2011 at 10:04

MartyIX · Accepted Answer · 2011-04-24 09:59:28Z

I solved the problem as is written here: http://tinymce.moxiecode.com/forum/viewtopic.php?pid=23065#p23065

My script for dynamically loading tinyMCE via jQuery is now:

// JS_FOLDER = "http://mydomain.com/js"
function initTinyMCE(JS_FOLDER, selector)
{
    var path = JS_FOLDER + '/GlobalUI/tinymce';

    if (selector == undefined) selector = 'mceEditor';
    var initFunct = function() {
        tinyMCE.baseURL = path + '/jscripts/tiny_mce/'; // THE IMPORTANT LINE
        tinyMCE.init({
            mode: "specific_textareas",
            editor_selector: selector,
            width : "700px",
            theme: "advanced",

            theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,undo,redo,|,bullist,numlist,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect,forecolor,backcolor",
            theme_advanced_buttons2 : "",
            theme_advanced_buttons3 : "",
            theme_advanced_buttons4 : "",
            theme_advanced_resizing : true,

            // Example content CSS (should be your site CSS)
            content_css : path + "/css/custom_css.css"
        });
    }

    if(typeof tinyMCE == "undefined") {
        $.getScript(path + '/jscripts/tiny_mce/tiny_mce_src.js', function() {
            initFunct();
        });
    } else {
        initFunct();
    }

Community · Accepted Answer · 2017-05-23 11:45:28Z

6

i am having this trouble too, after a day's work , i found a solution , just add this code before your tinymce.init() method:

 tinymce.dom.Event.domLoaded = true;

this would work on my case, may this help you too.

see here for more detail:tiny mce can't be inited when load js dynamically

edited May 23, 2017 at 11:45

CommunityBot

11 silver badge

answered Nov 14, 2012 at 2:26

YuC

1,8473 gold badges20 silver badges22 bronze badges

Collectives™ on Stack Overflow

load tinymce on demand by using jquery

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related