CoreUI › Preview

HTML preview.

Start

Include the script just after the plugin instances:

<script src="../text-editor.min.js"></script>
<script src="../text-editor/ui.min.js"></script>
<script>
var editor = TE.ui(document.querySelector('textarea'));
TE.plug('../text-editor/ui/ui/preview.min.js');
</script>

Configure

Custom Preview CSS and JS

Set custom CSS and JS for the preview content by configuring the preview_css and preview_js item:

editor.update({
    preview_css: 'path/to/file.css',
    preview_js: 'path/to/file.js'
});
editor.update({
    preview_css: ['path/to/file-1.css', 'path/to/file-2.css'],
    preview_js: ['path/to/file-1.js', 'path/to/file-2.js']
});

Custom Preview Content

Use enter.panel.preview hook to update the preview content with custom task:

editor._.hooks.set('enter.panel.preview', function($, panel) {
    // `.text-editor-panel < .text-editor-panel-body < .text-editor-panel-content < iframe`
    var frame = panel.children[1].children[0].children[0];
    // Loading…
    frame.src = 'data:text/html,' + encodeURIComponent('Loading…');
    // Do AJAX stuff…
    do_ajax_stuff_then_do(function(responseText) {
        frame.src = 'data:text/html,' + encodeURIComponent(responseText);
    });
});