WYSIWYG Live Edit & Preview Using TinyMCE Editor

Often you find yourself with the need to edit and preview some content in the same space on your website without redirecting or refreshing pages. In today’s tutorial, am going to demonstrate just how to achieve that for your website.

<div class="panel-heading">
    <h3 class="panel-title pull-left">Lorem Ipsum</h3>
    <i class="glyphicon glyphicon-edit pull-right" id="edit-preview"></i>
    <div class="clearfix"></div>
</div>

<div class="panel-body">
    <div id="editor-wrap"><textarea id="editor"></textarea></div>
    <div id="preview">
        <h1>Lorem Ipsum</h1>
        <h4>"Neque porro quisquam est dolor sit amet, consectetur..."</h4>
        <h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
        <hr>
        <p style="text-align: justify;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros lorem, egestas quis fermentum id, hendrerit sit amet massa. In ornare efficitur tellus et rutrum. Donec varius pretium risus, a tempus nibh malesuada sit amet. Pellentesque finibus cursus libero, vitae sollicitudin nunc ultrices eu. Nulla facilisi. Vestibulum at blandit nulla. Aenean ut dapibus lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at posuere nisl. Nulla tincidunt odio magna, et blandit magna dignissim nec.
        </p>
    </div>
</div>

<h3 class="panel-title pull-left">Lorem Ipsum</h3>

</div>

<h1>Lorem Ipsum</h1>

<h4>"Neque porro quisquam est dolor sit amet, consectetur..."</h4>

<h5>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>

<hr>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eros lorem, egestas quis fermentum id, hendrerit sit amet massa. In ornare efficitur tellus et rutrum. Donec varius pretium risus, a tempus nibh malesuada sit amet. Pellentesque finibus cursus libero, vitae sollicitudin nunc ultrices eu. Nulla facilisi. Vestibulum at blandit nulla. Aenean ut dapibus lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc at posuere nisl. Nulla tincidunt odio magna, et blandit magna dignissim nec.

</p>

</div>

Let’s add some styling to it.

.panel {
    margin-top: 25px;
}
.panel-body {
    padding: 0;
}
.glyphicon {
    font-size: 20px;
}
#editor, #preview {
    padding: 15px;
}
#editor-wrap, #editor, #preview {
    width: 100%;
    height: 300px;
}
#editor {
    border: 0;
}
#editor-wrap {
    display: none;
}

.panel {

margin-top: 25px;

}

.panel-body {

padding: 0;

}

.glyphicon {

font-size: 20px;

}

#editor, #preview {

padding: 15px;

}

#editor-wrap, #editor, #preview {

width: 100%;

height: 300px;

}

#editor {

border: 0;

}

#editor-wrap {

display: none;

}

Note: Initially the only the preview is showing while the editor is hidden.

Preview Mode

Now add some jquery to toggle the display between edit and preview mode while maintaining the content.

$("#edit-preview").on("click", function() {

    if ($('#editor-wrap').css('display') == "none") {
        $('#editor').val($('#preview').html());
    }else{
        $('#preview').html($('#editor').val());
    }

    $('#editor-wrap,#preview').toggle();

});

$("#edit-preview").on("click", function() {

if ($('#editor-wrap').css('display') == "none") {

$('#editor').val($('#preview').html());

}else{

$('#preview').html($('#editor').val());

}

$('#editor-wrap,#preview').toggle();

});

Edit Mode: Using Textarea

Just in case you want to make things fancy by adding a WYSIWYG editor rather than using a Textarea, you can do so using TinyMCE editor like this…

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

tinymce.init({
    selector: '#editor',
    height: 300,
    width: "100%",
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table contextmenu paste code'
    ],
    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image'
});

tinymce.init({

selector: '#editor',

height: 300,

width: "100%",

plugins: [

'advlist autolink lists link image charmap print preview anchor',

'searchreplace visualblocks code fullscreen',

'insertdatetime media table contextmenu paste code'

});

Modify the toggle functionality to match the new TinyMCE option

$("#edit-preview").on("click", function(){

    if ($('#editor-wrap').css('display') == "none") {
        /* $('#editor').val($('#preview').html()); */
        tinyMCE.get("editor").setContent($('#preview').html());
    }else{
        /* $('#editor').val($('#preview').html()); */
        $('#preview').html(tinyMCE.get("editor").getContent());
    }

    $('#editor-wrap,#preview').toggle();

});

$("#edit-preview").on("click", function(){

if ($('#editor-wrap').css('display') == "none") {

/* $('#editor').val($('#preview').html()); */

tinyMCE.get("editor").setContent($('#preview').html());

}else{

/* $('#editor').val($('#preview').html()); */

$('#preview').html(tinyMCE.get("editor").getContent());

}

$('#editor-wrap,#preview').toggle();

});

Your editor should now be working just fine

Edit Mode: Using TinyMCE Editor

Download the complete source code, feel free to modify it to suit your needs

Source Code

Enter your keyword