tiny mce can't be inited when load js dynamically

Question

i am having trouble with tinyMCE, when i put <script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"> to <head>, and put init code before the <textarea class="tinyMceEditor">, it works fine. the init code is like this:

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

But now, i want to defer the loading of tiny_mce.js, when user click a button on the first time, the tiny_mce.js will be loaded, and then append the <textarea class="tinyMceEditor"> to <body>, then do the init work with the previous code, but this time, it won't init the tinyMCE editor, it only shows the <textarea class="tinyMceEditor">

googled, but find nothing related to this, anyone has met this problem?

Any suggestion will be appreciated.

i looked into chrome web developer tools and found that if i dynamically load the tinymce.js, other js needed like en.js, editor_template.js, editor_plugin.js etc won't be loaded. even when i add these js files to dynamically loading, the tinymce still can't be inited.

thank you for your help, i watched in firebug, and i do get the tinymce.js loaded before append <textarea to <body>, then i append the <textarea>, and do the tinymce init(), i am using LazyLoad(jQuery plugin) to dynamically load the js files.

here is what i did

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

if i don't load tinymce.js dynamically, just put a <script> tag in <head>, the tinyMCE can be inited , but when i load tinymce.js dynamically, it doesn't work. Any idea with this?

so your onClick on the button loads the external JS, adds a textarea to your document, and then runs tinyMCE.init() in that order? see http://stackoverflow.com/a/912713/830171 — gingerCodeNinja, Nov 12 '12 at 17:45
yes, and i have found the solution.`
`just add `window.tinymce.dom.Event.domLoaded=true` before `tinymce.init()` and it just works. — YuC, Nov 13 '12 at 13:20

score 27 · Accepted Answer · answered Nov 13 '12 at 13:25

27

after a day's work, finally found the solution, just put

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

before

 tinymce.init();

then the tinymce can be inited correctly.

answered Nov 13 '12 at 13:25

YuC

1,503
3
16
22

1

Great finding!! Additionally you may have to add your js root directory like this before calling init() - "tinymce.baseURL = '/static/js/tinymce/';" More about this: http://stackoverflow.com/questions/3636309/load-tinymce-on-demand-by-using-jquery – Simon Steinberger Jun 13 '13 at 06:20
I was having a problem initializing tinymce on click inside a Require and Backbone wrapper, but only in Internet Explorer, even ie10. This solved it. Thanks a ton. – iabw Jul 23 '13 at 16:37
ive been trying to find the solution for 2 days... Thanks!! – SkyPunch Aug 19 '13 at 12:39
OH WOW! Yep, I've been looking at this for a couple of days too now. What did we do before the days of SO? :o) Very grateful, thank you! – Ben Power Oct 23 '13 at 05:28
@BenPower i am glad this is helpful to you – YuC Oct 24 '13 at 10:33
Thanks for this! Just had this infuriating problem in IE when trying to switch to require.js. This solved it. – Grüse Nov 06 '13 at 14:14
1

Hello sir, I come from 2 years in the future.Thank you! Your answer just saved me. – Jon Snow Apr 16 '14 at 13:18
Well, hi. I come from 4 years into the future, and I'm about to try this solution out. One big question, though: Is this a bug or what? Do we need to stumble on a hack to get this to work when it should just have worked straight out? – Ifedi Okonkwo Jun 25 '16 at 17:05

score 1 · Answer 2 · answered Jun 19 '19 at 07:48

I resolved this issue by creating a separate coffee script file. Then I declared below function with window scope to access in views.

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

Then in view partial, I called this function:

:coffeescript
  initialize_tiny_mce()

Now dynamically created element is assigned a tinymce editor.

tiny mce can't be inited when load js dynamically

2 Answers2

Linked