TinyMCE - Adding Event Listeners Issue

Question

I'm stuck on understanding how to setup event handlers for my tinymce editors. This post may get long, so my apologies.

I'm reading up on this post, which is exactly what I want to do:

I may be instantiating my TinyMCE editor instances in a way that is confusing me with extending it's power.

On my sites, I mostly have my editors doing the most simple, bare-bones work. And now I'm on a page that I want to reflect onkeyup changes to be displayed in <div id="displayHtml"> (similar to what SOF is doing)

Here is what I typically have in most my 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]); 
    });

     // my failed attempt to add an event
     $(".mceContentBody").on('keyup',function(){
        var htmltxt = $(this).val();
        $("#displayHtml").html(htmltxt);
     });

}); 
</script>

</body>
</html>

You'll see tinymce="tinymce_basic" in my textarea. I globalized calling the tinymce themes and plugins this way. Works great for me too.

In my tinymce_configs.js file, here's what 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 for 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 you have it. Everything above works well for all my pages with textareas that have the attribute: tinymce="tinymce_basic". Now it's time to focus on a single page that would look great with all changes in the tinymce to reflect inside the <div id="displayHtml">.

My attempt, above, is looking for .mceContentBody, which I assumed would work, since the tinymce editor appears to hold the html inside it's iframe with that class. (Doesn't work)

I get confused with how others are firing up their Tiny MCE editors, since mine doesn't appear to look the same. Here's Tiny MCE's onKeyUp example.
I've never started anything with tinyMCE.init({....

Do I need to change how I'm calling each tinymce editor? With what I have, how can I reflect the contents of my TinyMCE into another element?

An Alteration from some Posts below:

<script language="javascript" type="text/javascript">
$(document).ready(function(){

    $('textarea[tinymce]').each(function(){ 
        var tinymceopts = $(this).attr('tinymce');
        $(this).tinymce(window[tinymceopts]); 
    });

     // This was added
     $(".mceContentBody").on('keyup',function(){
            tinymce_basic["setup"] = function(ed) { 
                ed.onKeyUp.add(function(ed, e) { 
                     console.debug('Key up event: ' + e.keyCode); });
            }       

     });

}); 
</script>

Athlan Athlan · Accepted Answer · 2013-03-24T13:51:39

You need do it in configuration:

tinyMCE.init({
    mode : ...,
    ...,
    setup : function (ed) {
        ed.onKeyPress.add(
            function (ed, evt) {
                alert("Editor-ID: "+ed.id+"\nEvent: "+evt);
                //....
            }
        );
    },
    ...
});

TinyMCE - Adding Event Listeners Issue

1 Answers