I am trying below code

 $('textarea.tinymce').keypress(function(){
      dealDescription = $('textarea.tinymce').tinymce().execCommand('mcePreview');
      $("#deal_preview div").text(dealDescription);
 });

But I am not using jquery tinymce editor suppose I use jquery tinymce and other jquery UI ponent not working properly so I am directly using the tinymce ponent.

Now I need to show content preview in preview box for each key press.

I am trying below code

 $('textarea.tinymce').keypress(function(){
      dealDescription = $('textarea.tinymce').tinymce().execCommand('mcePreview');
      $("#deal_preview div").text(dealDescription);
 });

But I am not using jquery tinymce editor suppose I use jquery tinymce and other jquery UI ponent not working properly so I am directly using the tinymce ponent.

Now I need to show content preview in preview box for each key press.

• javascript
• jquery
• tinymce

Share Improve this question Follow asked Apr 23, 2011 at 18:13 ElankeeranElankeeran 6,18499 gold badges4242 silver badges5757 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Im using this in tinymce 4.x

tinymce.init({
    selector: "#tinymce-textarea",
    setup : function(ed) {
        ed.on("change", function(e){
            $('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
        });
        ed.on("keyup", function(){
            $('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
        });
   }
});

Explanation:

on("change") is for detect changes on mouse event if u click toolbar icon or selection from the menu. It also able to detect the keyboard event but only after lost focus (not real time).

on("keyup") is for detect changes on real time keyboard event

Could be done after initialisasing as well by getting the active editor:

tinyMCE.activeEditor.on('keyup', function () {
    // your nicely formatted code here
});

There's also an editors array you can iterate over if you need it.

I try with below code is working fine

tinyMCE.init({

    mode : "exact",
    elements : "text",

    setup : function (theEditor) {
        theEditor.onKeyPress.add(
            function (theEditor) {
                previewContent(theEditor);
            }
        );
    },
});

function previewContent(editorObject){
     var content = editorObject.getContent();
     document.getElementById("previewContent").innerHTML = content;
}