Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Normally ckEditor works absolutely fine with angularJS as a directive. </p> <p>On 'pastestate' event of the ckeditor you set the value to the angular model :-</p> <pre><code>ck.on('pasteState', function () { $timeout(function () { ngModel.$setViewValue(ck.getData()); }); }); </code></pre> <p>And the other way round to set the value to the ckEditor you use the $render function.</p> <pre><code>ngModel.$render = function (value) { ck.setData(ngModel.$viewValue); }; </code></pre> <p>Everything goes for a toss when you use a ckEditor function like insertText() or insertHtml() as the pastestate event gets fired immediately (otherwise it gets called after a delay). It behaves erratic when the insertText() is called the second time and adds the text twice, thrice the third time and so on.</p> <p>So to make ckEditor work with Bootstrap Modal and AngularJS we have to use the destroy function of ckeditor on closing the modal....</p> <pre><code>angular.module('ngTeknorix') .directive('ckEditor', ['$timeout', function ($timeout) { return { require: '?ngModel', link: function ($scope, $element, $attrs, ngModel) { $scope.initCkEditor = function () { var ck = CKEDITOR.replace($attrs.id); ck.on('pasteState', function () { $timeout(function () { ngModel.$setViewValue(ck.getData()); }); }); ngModel.$render = function () { ck.setData(ngModel.$viewValue); }; $scope.insertText = function (value) { ck.insertText(value); } }; $scope.destroyCkEditor = function () { if (CKEDITOR.instances[$attrs.id]) { CKEDITOR.instances[$attrs.id].destroy(false); } }; } }; }]); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload