ckEditor in bootstrap modal angularjs

-2

我使用ckeditor的表單工作正常，但我希望當按大型模型按鈕時，然後bootstrap模式應該打開這個ckeditor和模式當你按下保存按鈕然後文本應該顯示在div標籤你在ckeditor中輸入的內容。ckEditor in bootstrap modal angularjs

see my code

我的HTML代碼

<!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>

我的腳本代碼

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(); 
       } 
      }; 
     } 

    } 
}; 
}]);

See my code in plunker

來源

2014-09-25 Bharath Kumar

您應該將代碼隔離在特定的問題，而不是粘貼您的整個腳本 – 2014-09-25 15:42:57

ok了。我還保留了一個鏈接... – 2014-09-25 15:56:19

-1

HTML代碼

<!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腳本

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(); 
       } 
      }; 
     } 

    } 
}; 
}]);

Fixed plunker

來源

2014-09-26 07:08:37

ckEditor in bootstrap modal angularjs

回答

相關問題