Geek Answers Handbook

Tiny mce cannot be enabled when js dynamically loads

I'm having problems with tinyMCE when I put <script type="text/javascript" src="/scripts/tiny_mce/tiny_mce.js"> in <head> and put the initialization code before <textarea class="tinyMceEditor"> , It works great. the initialization code looks 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 postpone loading tiny_mce.js when the user first clicks the button, tiny_mce.js loads, and then adds <textarea class="tinyMceEditor"> to <body> , then run init with the previous code, but this time it will not start tinyMCE editor, it will only display <textarea class="tinyMceEditor">

googled but not find anything related to this, has anyone encountered this problem?

Any suggestion would be appreciated.

I looked into the chrome tools for web developers and found that if I dynamically load tinymce.js, other js like en.js, editor_template.js, editor_plugin.js, etc. will not load. even when I add these js files to dynamic loading, tinymce still cannot be used.

Thank you for your help, I look in firebug and I load tinymce.js before adding <textarea to <body> , then add <textarea> and do tinymce init() , I use LazyLoad (jQuery plugin) to dynamically load js files .

that's 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 the <script> in <head> , tinyMCE can be enabled, but when I load tinymce.js dynamically, it does not work. Any idea with this?

+4
source share
2 answers

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

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

before

  tinymce.init();

then the cinematic can be entered correctly.

+27
source

I solved this problem by creating a separate coffee script file. Then I declared below a function with a window pane for 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 of the partial, I called this function:

 :coffeescript initialize_tiny_mce()

The dynamically created item is now assigned to the tinymce editor.

0
source

More articles:


All Articles