CODEWITHSUNDEEP
javascriptjquerytinymce
Fabrizio
Fabrizio

Reputation: 69

Really Live Preview with TinyMCE (value of TinyMCE)

I'm using a short Jquery Script to make a live preview of a few input fields. Now with TinyMCE i can't get the value of tinyMCE to insert it into a div. I found another thread Get value of tinymce textarea with jquery selector, but i not really can figure out how to use this tipps on my code. I'm a beginner with jQuery and very thankful vor every help.

JS Fiddle

$(document).ready(function() {
    updatePreview();
    $('#live-preview-form input, #live-preview-form textarea').bind('blur keyup',updatePreview);
});

function updatePreview(){
    var tinymce = $('#lp-message');
    tinymce.html($('#message').val());
}

Upvotes: 2

Views: 3087

Answers (1)

Marko Šutija
Marko Šutija

Reputation: 375

Sorry, but there are lot of mistakes in Your code. :/

This is the only code that you need under javascript section.

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

And here is your html code:

<div id="live-preview-form">
    <textarea id="message">Easy! You should check out MoxifvdfvdfvfdveManager!</textarea></div>
<div id="lp-message"></div>

As u can see you have to use tinymce API to get content from editors. And "keyup" events should be used on editor not on the "textarea".

I hope that I helped You. :)

Upvotes: 6

Related Questions