aba aba - 5 months ago 72
AngularJS Question

ckeditor throwing error in Angular.js

I am using

ckeditor
for editing the content, I injected the module and also linked all files which are required by
ckeditor
, but it's throwing
error
like
TypeError: this[a] is undefined
, I am new in Angular, I didn't get any proper solution from myself.

Can anybody help me why I am getting this
error
?

Here is my code stuff

app.controller('editAboutUsCtrl', function ($scope) {
$scope.editorOptions = {
language: 'eu'
// uiColor: '#000000'
};
$scope.$on("ckeditor.ready", function( event ) {
$scope.isReady = true;
});
});


And here is my
HTML


<div ng-controller="editAboutUsCtrl">
<div ng-cloak ng-hide="isReady" class="highlight">
Initialising ...
</div>

<div ng-cloak ng-show="isReady">
<textarea ckeditor="editorOptions" name="editor" ng-model="aboutUsContent"></textarea>
</div>
</div>

Answer

A few things about Angularjs

Refer to the style guide you like, however here is one if you do not follow one.

A style guide link

Your controller name would become EditAboutUsCtrl.

I don't think you need the ng-cloak. That directive just hides the element until it has all its information then uncloaks. In your case you are using ng-hide and ng-show.

Your ng-model should be an object of some type, not a primative ex. primative: "hello ckEditor" object: var aboutUsContent = {};

If you need the name parameter, just know that this is used with a form name ex.

Then you can call $scope.myForm.editor.$valid?

Back to your question. The examples that I found online use a directive. You did not include an example in your code, but I will assume that ckeditor="editorOptions" is your directive.

So make sure it follows this example.

example link to ckeditor with angularjs

There are two jsfiddle examples at the end of the post. Here is the link to the one that seamed quite simple and perhaps you could use right away.

try this

<div data-ng-app="app" data-ng-controller="myCtrl">

<h3>CKEditor 4.2:</h3>
  <div ng-repeat="editor in ckEditors">
    <textarea data-ng-model="editor.value" data-ck-editor></textarea>
    <br />
  </div>
  <button ng-click="addEditor()">New Editor</button>
</div>

var app = angular.module('app', []);

app.directive('ckEditor', [function () {
  return {
    require: '?ngModel',
    link: function ($scope, elm, attr, ngModel) {

        var ck = CKEDITOR.replace(elm[0]);

        ck.on('pasteState', function () {
            $scope.$apply(function () {
                ngModel.$setViewValue(ck.getData());
            });
        });

        ngModel.$render = function (value) {
            ck.setData(ngModel.$modelValue);
        };
    }
  };
}])

function myCtrl($scope){
  $scope.ckEditors = [];
  $scope.addEditor = function(){
    var rand = ""+(Math.random() * 10000);
    $scope.ckEditors.push({value:rand});
  }
}