JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://ckeditor.com/apps/ckeditor/4.2/ckeditor.js"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div data-ng-app="app" data-ng-controller="myCtrl">
    
<h3>CKEditor 4.2:</h3>
    <button ng-click="setData()">Change the values</button>
     <button ng-click="CKupdate()">update</button>
    <textarea data-ng-model="ckContent1" data-ck-editor></textarea>
    <br />
    <textarea data-ng-model="ckContent2" data-ck-editor></textarea>
</div>

JavaScript

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

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {
            
            var ck = CKEDITOR.replace(elm[0]);
            
            ck.on('pasteState', function () {
                $scope.$apply(function () {
                    ngModel.$setViewValue(ck.getData());
                });
            });
            
            ngModel.$render = function (value) {
                ck.setData(ngModel.$modelValue);
            };
        }
    };
}])

function myCtrl($scope){
    $scope.ckContent1 = 'test1';
    $scope.ckContent2 = 'test2';
    $scope.setData = function(){
        $scope.ckContent1 += 'test1';
        $scope.ckContent2 += 'test2';
    }
}


 function CKupdate() {
            for (var i in ckEditor.instances) {
                console.log(ckEditor.instances[i]);

               ckEditor.instances[i].on('change', function() {ckEditor.instances[i].updateElement() });

            }

        }