JSFiddle - React, Tailwind, and code Playground

by dkunin

HTML

<script src="http://ckeditor.com/apps/ckeditor/4.2.1/ckeditor.js"></script>
<div ng-controller="myCtrl">
    <textarea class="ck-editor" ng-model="text"></textarea>
     <h3>Result HTML:</h3>

    <div ng-bind-html-unsafe="text"></div>
</div>

JavaScript

var myApp = angular.module('myApp', []);

    myApp.directive('ckEditor', [function () {
        return {
            require: '?ngModel',
            restrict: 'C',
            link: function (scope, elm, attr, model) {
                var isReady = false;
                var data = [];
                var ck = CKEDITOR.replace(elm[0],{toolbar:[{ name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ]},['Bold','Italic','Underline']]});

                function setData() {
                    if (!data.length) {
                        return;
                    }
                    
                    var d = data.splice(0, 1);
                    ck.setData(d[0] || '<span></span>', function () {
                        setData();
                        isReady = true;
                    });
                }

                ck.on('instanceReady', function (e) {
                    if (model) {
                        setData();
                    }
                });
                
                elm.bind('$destroy', function () {
                    ck.destroy(false);
                });

                if (model) {
                    ck.on('change', function () {
                        scope.$apply(function () {
                            var data = ck.getData();
                            if (data == '<span></span>') {
                                data = null;
                            }
                            model.$setViewValue(data);
                        });
                    });

                    model.$render = function (value) {
                        if (model.$viewValue === undefined) {
                            model.$setViewValue(null);
                            model.$viewValue = null;
                        }

                        data.push(model.$viewValue);

                        if (isReady) {
                            isReady = false;
                            setData();
            ...