Menu
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?
245
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.
194
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.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
