I have form with ckeditor it is working fine but i want that when is press large model button then bootstrap modal should open with this ckeditor and in modal when you press save button then text should display on div tag what you type in ckeditor.
My html code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ckEditor demo</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-sanitize.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.js"></script>
<!--<link rel="stylesheet" type="text/css" href="/css/result-light.css">-->
<script type='text/javascript' src="http://ckeditor.com/apps/ckeditor/4.2.1/ckeditor.js"></script>
<script type='text/javascript' src="script.js"></script>
<style type='text/css'></style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<script type="text/ng-template" id="myModalContent">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<textarea class="ck-editor" ng-model="text"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
<h3>Result HTML:</h3>
<div ng-bind-html-unsafe="text"></div>
</div>
</body>
</html>
My script code
var myApp = angular.module('myApp', []);
var myCtrl = function ($scope) {
$scope.text = 'this is test';
};
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]);
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();
}
};
}
}
};
}]);
Html code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>ckEditor demo</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript' src='https://code.angularjs.org/1.1.5/angular.js'> </script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<!--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-sanitize.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular-resource.js"></script>
<!--<link rel="stylesheet" type="text/css" href="/css/result-light.css">-->
<script type='text/javascript' src="http://ckeditor.com/apps/ckeditor/4.2.1/ckeditor.js"></script>
<script type='text/javascript' src="script.js"></script>
<style type='text/css'></style>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<script type="text/ng-template" id="myModalContent">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<textarea class="ck-editor" ng-model="data"></textarea>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok(data)">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script><textarea class="ck-editor" ng-model="text"></textarea>
<button class="btn btn-default" ng-click="open('lg')" >Large modal</button>
<h3>Result HTML:</h3>
<div type="text" ng-bind-html-unsafe="data" ></div>
<button ng-click="show(data)">check</button>
</div>
</body>
</html>
AngularJS script
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('myCtrl',['$scope', '$modal','$log','$rootScope',
function controller($scope, $modal, $log, $rootScope)
{
$rootScope.setData = function(data)
{
$scope.data = $rootScope.data;
};
$scope.show= function(data)
{
alert(data);
};
$scope.text = 'this is test';
$scope.open = function (size) {
$scope.val = "";
var modalInstance = $modal.open({
templateUrl: 'myModalContent',
controller: ModalInstanceCtrl,
size: size,
backdrop: 'static',
resolve: {
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function (selectedItem) {
$scope.selected = selectedItem;
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
}]);
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope,$rootScope, $modalInstance) {
$scope.ok = function (text) {
console.log("ckEditor Data: ",text);
$scope.data = text;
$rootScope.data = $scope.data;
$rootScope.setData($rootScope.data);
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
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],{
allowedContent: true
});
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();
}
};
}
}
};
}]);