JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="//cdn.ckeditor.com/4.5.5/standard/ckeditor.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/cyborg/bootstrap.min.css">
<div id="el">
    <div class="container" id="wrapper">
        <textarea v-if="content" id="content" name="content" v-rich-editor="content">
        </textarea>
        <br/>
        <label>Content</label>
        <pre>{{ content }}</pre>
    </div>
</div>

CSS

body { background: white; }
#wrapper { padding: 10px; border: 1px #ddd solid; }
#wrapper { width: 100%; position: relative; }
#content { width: 80%; margin: auto; position: absolute; left: 0; right: 0; padding: 15px; }

JavaScript

Vue.directive('rich-editor', {
    twoWay: true,
    bind: function bind() {
        console.log(this.setupEditor);
        this.vm.$nextTick(this.setupEditor.bind(this));
    },
    setupEditor: function setUpEditor() {
        var vm = this;
        CKEDITOR.replace(this.el.id);
        CKEDITOR.instances[this.el.id].on('change', function () {
            vm.set(CKEDITOR.instances[vm.el.id].getData());
        });
    },
    update: function update(value) {
        if (!CKEDITOR.instances[this.el.id])
            return Vue.nextTick(this.update.bind(this, value));
        CKEDITOR.instances[this.el.id].setData(value);
    },
    unbind: function () {
        CKEDITOR.instances[this.el.id].destroy();
    }
})

var vm = new Vue({
    el: '#el',
    data: {
        content: ""
    }
})

setTimeout(function () {
    vm.content = "<p>Lorem ipsum</p>\n\n<p>Bacon is yum.</p>";
}, 1500);