JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://demo.azureits.com/js/cms/ckeditor/ckeditor.js"></script>
<link rel="stylesheet" href="http://demo.azureits.com/css/cms/bootstrap.css">
<div ng-controller="pageCtrl" ng-app="cmsPlus">
<form class="form-horizontal" role="form" ng-submit="savePage(entry)">
<!-- Body -->
<div class="form-group">
<label class="col-lg-2 control-label">Body</label>
<div class="col-lg-8">
<textarea ck-editor ng-model="entry.body" class="form-control" id="body-editor" value="{{entry.body}}">{{entry.body}}</textarea>
</div>
{{entry.body}}
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div><!--/row-->
JavaScript
var cmsPlus = angular.module('cmsPlus', []);
cmsPlus.directive('ckEditor', function() {
return {
require: '?ngModel',
link: function(scope, elm, attr, ngModel) {
var ck = CKEDITOR.replace(elm[0]);
if (!ngModel) return;
ck.on('instanceReady', function() {
ck.setData(ngModel.$viewValue);
});
ck.on('pasteState', function() {
scope.$apply(function() {
ngModel.$setViewValue(ck.getData());
});
});
ngModel.$render = function(value) {
ck.setData(ngModel.$viewValue);
};
}
};
});
// Data Service
cmsPlus.factory('Data', function(){
return {root_path:'http://site.com/index.php/'};
});
/*
|--------------------------------------------------------
| Page Controller
|--------------------------------------------------------
*/
function pageCtrl($scope, $http, Data) {
$scope.savePage = function(entry) {
console.log(entry);
$http.post(Data.root_path + 'api/v1/pages', entry).
success(function(data, status, headers, config) {
console.log(data);
}).
error(function(data, status, headers, config) {
console.log(data);
});
};
} // End pageCtrl