| 1 | <!doctype html> |
|---|
| 2 | <html> |
|---|
| 3 | <head> |
|---|
| 4 | <title>CkEditor</title> |
|---|
| 5 | </head> |
|---|
| 6 | <body ng-app='myApp'> |
|---|
| 7 | <div ng-controller="MyCtrl"> |
|---|
| 8 | <div ng-repeat="editor in editors"> |
|---|
| 9 | <textarea id="{{editor.id}}" |
|---|
| 10 | data-ng-model="editor.content" |
|---|
| 11 | value="{{editor.content}}" |
|---|
| 12 | name="{{editor.name}}" |
|---|
| 13 | style="width:670px !important" |
|---|
| 14 | is-read-only="{{editor.isReadOnly}}" |
|---|
| 15 | data-ck-editor></textarea> |
|---|
| 16 | <br /> |
|---|
| 17 | </div> |
|---|
| 18 | </div> |
|---|
| 19 | </body> |
|---|
| 20 | </html> |
|---|
| 21 | <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script> |
|---|
| 22 | <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script> |
|---|
| 23 | <script src="http://cdn.ckeditor.com/4.4.3/standard/ckeditor.js"></script> |
|---|
| 24 | <script language="javascript"> |
|---|
| 25 | var app = angular.module("myApp", []); |
|---|
| 26 | app.controller('MyCtrl', function ($scope) { |
|---|
| 27 | $scope.option = true; |
|---|
| 28 | $scope.editors = [ |
|---|
| 29 | { |
|---|
| 30 | id: 'sample1', |
|---|
| 31 | content: 'sample 1 content ENABLED', |
|---|
| 32 | name: 'sample1', |
|---|
| 33 | isReadOnly: false, |
|---|
| 34 | |
|---|
| 35 | }, { |
|---|
| 36 | id: 'sample2', |
|---|
| 37 | content: 'sample 2 content DISABLED', |
|---|
| 38 | name: 'sample2', |
|---|
| 39 | isReadOnly: true, |
|---|
| 40 | |
|---|
| 41 | } |
|---|
| 42 | ]; |
|---|
| 43 | }).directive('ckEditor', [ |
|---|
| 44 | function () { |
|---|
| 45 | return { |
|---|
| 46 | require: '?ngModel', |
|---|
| 47 | link: function ($scope, elm, attr, ngModel) { |
|---|
| 48 | var selectedElement = elm[0]; |
|---|
| 49 | if (selectedElement !== null && selectedElement !== undefined) { |
|---|
| 50 | |
|---|
| 51 | var loadCk = function () { |
|---|
| 52 | |
|---|
| 53 | ck.on('pasteState', function () { |
|---|
| 54 | $scope.$apply(function () { |
|---|
| 55 | ngModel.$setViewValue(ck.getData()); |
|---|
| 56 | }); |
|---|
| 57 | }); |
|---|
| 58 | // wait until the editor has done initializing |
|---|
| 59 | ck.on("instanceReady", function () { |
|---|
| 60 | // insert code to run after editor is ready |
|---|
| 61 | ck.setData(ngModel.$modelValue); |
|---|
| 62 | if (attr.isReadOnly) { |
|---|
| 63 | if (attr.isReadOnly === 'true') |
|---|
| 64 | ck.setReadOnly(true); |
|---|
| 65 | else |
|---|
| 66 | ck.setReadOnly(false); |
|---|
| 67 | } |
|---|
| 68 | |
|---|
| 69 | }); |
|---|
| 70 | ngModel.$render = function () { |
|---|
| 71 | ck.setData(ngModel.$modelValue); |
|---|
| 72 | //ck.focus(); |
|---|
| 73 | }; |
|---|
| 74 | } |
|---|
| 75 | |
|---|
| 76 | if (attr.id) |
|---|
| 77 | elm[0].id = attr.id; |
|---|
| 78 | if (attr.name) |
|---|
| 79 | elm[0].name = attr.name; |
|---|
| 80 | if (attr.value) { |
|---|
| 81 | ngModel.$modelValue = attr.value; |
|---|
| 82 | } |
|---|
| 83 | var ck = CKEDITOR.replace(elm[0]); |
|---|
| 84 | loadCk(); |
|---|
| 85 | } |
|---|
| 86 | } |
|---|
| 87 | }; |
|---|
| 88 | } |
|---|
| 89 | ]); |
|---|
| 90 | </script> |
|---|
