JSFiddle - React, Tailwind, and code Playground

by Florian Ferbach

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/ace/1.1.01/min/ace.js"></script>
<div id="top">
    <textarea id="input">var editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai");</textarea>
</div>
<div id="toolbar">
    <div class="btn-group">
        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">Language <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a data-language="ace/mode/javascript">JavaScript</a>
            </li>
        </ul>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Theme <span class="caret"></span>

        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a data-theme="ace/theme/ambiance">Ambiance</a>
            </li>
            <li><a data-theme="ace/theme/chaos">Chaos</a>
            </li>
            <li><a data-theme="ace/theme/chrome">Chrome</a>
            </li>
            <li><a data-theme="ace/theme/clouds">Clouds</a>
            </li>
            <li><a data-theme="ace/theme/clouds_midnight">Clouds Midnight</a>
            </li>
            <li><a data-theme="ace/theme/cobalt">Cobalt</a>
            </li>
            <li><a data-theme="ace/theme/crimson_editor">Crimson Editor</a>
            </li>
            <li><a data-theme="ace/theme/dawn">Dawn</a>
            </li>
            <li><a data-theme="ace/theme/dreamweaver">Dreamweaver</a>
            </li>
            <li><a data-theme="ace/theme/eclipse">Eclipse</a>
            </li>
        </ul>
    </div>
    <button id="bt-copy">test</button>
</div>
<div id="editor"></div>

CSS

div#top, div#editor {
    height:200px;
    border:1px solid red;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;
}
div#top textarea {
    height:100%;
    width:100%;
}

JavaScript

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.setValue($('textarea#input').val());
editor.setReadOnly(true);;

$('textarea#input').on('keyup', function (e) {
    editor.setValue($(this).val());
});

$('a[data-language]').on('click', function (e) {
    editor.getSession().setMode($(this).data('language'));
});
$('a[data-theme]').on('click', function (e) {
    editor.setTheme($(this).data('theme'));
});
$('#bt-copy').on('click', function (e) {
    if (document.body.createControlRange) {
    console.log('okokalright!');
        var htmlContent = document.getElementById('editor');
        var controlRange;

        var range = document.body.createTextRange();
        range.moveToElementText(htmlContent);

        //Uncomment the next line if you don't want the text in the div to be selected
        range.select();

        controlRange = document.body.createControlRange();
        controlRange.addElement(htmlContent);

        //This line will copy the formatted text to the clipboard
        controlRange.execCommand('Copy');

        alert('Your HTML has been copied\n\r\n\rGo to Word and press Ctrl+V');
    }
});