Angular.js中的ckeditor抛出错误

时间:2015-01-13 17:43:49

标签: javascript angularjs

我正在使用ckeditor来修改内容,我注入了模块,并且还链接了ckeditor所需的所有文件,但它正在error投掷TypeError: this[a] is undefined 1}},我是Angular的新手,我没有得到任何适当的解决方案。

有人可以帮我解决这个问题的原因error吗?

这是我的代码

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

这是我的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>

1 个答案:

答案 0 :(得分:0)

关于Angularjs的一些事情

请参阅您喜欢的样式指南,但如果您不遵循,请参阅此处。

A style guide link

您的控制器名称将成为EditAboutUsCtrl。

我认为你不需要ng-cloak。该指令只是隐藏元素,直到它具有所有信息然后才能解除。在您的情况下,您正在使用ng-hide和ng-show。

你的ng模型应该是某种类型的对象,而不是一个主要的ex。 至高无上:“你好ckEditor” object:var aboutUsContent = {};

如果您需要name参数,只需知道它与表单名称ex。

一起使用

然后你可以调用$ scope.myForm.editor。$ valid?

回到你的问题。我在网上找到的例子使用了一个指令。您没有在代码中包含示例,但我将假设ckeditor =“editorOptions”是您的指令。

因此请确保遵循此示例。

example link to ckeditor with angularjs

在帖子的末尾有两个jsfiddle示例。这是一个非常简单的链接,也许你可以马上使用。

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