CKEditor live preview

by HugeHugh

HTML

<script src="//cdn.ckeditor.com/4.4.0/standard/ckeditor.js"></script>
<textarea id="editor">
    <p>Hello world! <a href="http://google.com">This is some link</a>.</p>
    <p>And there is some <s>deleted</s>&nbsp;text.</p>
</textarea>    

<div id="preview"></div>

CSS

#preview { outline: 2px dashed red; padding: 2em; margin: 2em 0; }

/* Hide the toolbar with CSS */
.cke_top { display: none !important }

JavaScript

var preview = CKEDITOR.document.getById( 'preview' );

function syncPreview() {
    preview.setHtml( editor.getData() );
}

var editor = CKEDITOR.replace( 'editor', {
    on: {
        // Synchronize the preview on user action that changes the content.
        change: syncPreview,
        
        // Synchronize the preview when the new data is set.
        contentDom: syncPreview
    }
} );