Enter your keyword

WYSIWYG Live Edit & Preview Using TinyMCE Editor

WYSIWYG Live Edit & Preview Using TinyMCE Editor

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.

Let’s add some styling to it.

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

preview

Preview Mode

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

edit

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…

Modify the toggle functionality to match the new TinyMCE option

Your editor should now be working just fine

edit-with-tinymce-editor

Edit Mode: Using TinyMCE Editor

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

Source Code