jquery - TinyMCE - Adding Event Listeners Issue -
i'm stuck on understanding how setup event handlers tinymce editors. post may long, apologies.
i'm reading on this post, want do:
i may instantiating tinymce editor instances in way confusing me extending it's power.
on sites, have editors doing simple, bare-bones work. , i'm on page want reflect onkeyup changes displayed in <div id="displayhtml"> (similar sof doing)
here typically have in pages:
<html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="tinymce_configs.js"></script> </head> <body> <div id="displayhtml"></div> <textarea name="notecomments" id="notecomments" tinymce="tinymce_basic" style="width:650px;height:555px;"></textarea> <script language="javascript" type="text/javascript"> $(document).ready(function(){ $('textarea[tinymce]').each(function(){ var tinymceopts = $(this).attr('tinymce'); $(this).tinymce(window[tinymceopts]); }); // failed attempt add event $(".mcecontentbody").on('keyup',function(){ var htmltxt = $(this).val(); $("#displayhtml").html(htmltxt); }); }); </script> </body> </html> you'll see tinymce="tinymce_basic" in textarea. globalized calling tinymce themes , plugins way. works great me too.
in tinymce_configs.js file, here's i've defined:
// javascript document var tinymce_basic = { script_url : '/tinymce/tiny_mce.js',// location of tinymce script // general options theme : "advanced", plugins : "pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist", force_p_newlines : false, force_br_newlines : true, forced_root_block : false, // needed 3.x // theme options theme_advanced_buttons1 : "bold,italic,underline,strikethrough,hr,|,justifyleft,justifycenter,justifyright,justifyfull,|,formatselect,fontselect,fontsizeselect,|,styleprops,forecolor,backcolor,|,link,unlink,image,|,bullist,numlist,removeformat,code,|,preview", theme_advanced_buttons2 : "", theme_advanced_buttons3 : "", theme_advanced_buttons4 : "", theme_advanced_toolbar_location : "top", theme_advanced_toolbar_align : "left", theme_advanced_statusbar_location : "bottom", theme_advanced_resizing : true, theme_advanced_resize_horizontal: false } /* more var options below */ so there have it. above works pages textareas have attribute: tinymce="tinymce_basic". it's time focus on single page great changes in tinymce reflect inside <div id="displayhtml">.
my attempt, above, looking .mcecontentbody, assumed work, since tinymce editor appears hold html inside it's iframe class. (doesn't work)
i confused how others firing tiny mce editors, since mine doesn't appear same. here's tiny mce's onkeyup example.
i've never started tinymce.init({....
do need change how i'm calling each tinymce editor? have, how can reflect contents of tinymce element?
an alteration posts below:
<script language="javascript" type="text/javascript"> $(document).ready(function(){ $('textarea[tinymce]').each(function(){ var tinymceopts = $(this).attr('tinymce'); $(this).tinymce(window[tinymceopts]); }); // added $(".mcecontentbody").on('keyup',function(){ tinymce_basic["setup"] = function(ed) { ed.onkeyup.add(function(ed, e) { console.debug('key event: ' + e.keycode); }); } }); }); </script>
you need in configuration:
tinymce.init({ mode : ..., ..., setup : function (ed) { ed.onkeypress.add( function (ed, evt) { alert("editor-id: "+ed.id+"\nevent: "+evt); //.... } ); }, ... }); 
Comments
Post a Comment