0

この問題の解決策を使用する: Ckeditor の値を angularjs および rails のモデル テキストにバインドする

ページでディレクティブを使用しようとすると、次のエラーが発生します。

Uncaught TypeError: Cannot call method 'unselectable' of null ckeditor.js:290
a ckeditor.js:290
(anonymous function) ckeditor.js:286
i ckeditor.js:10
CKEDITOR.event.CKEDITOR.event.fire ckeditor.js:12
CKEDITOR.editor.CKEDITOR.editor.fire ckeditor.js:13
CKEDITOR.event.CKEDITOR.event.fireOnce ckeditor.js:12
CKEDITOR.editor.CKEDITOR.editor.fireOnce ckeditor.js:13
(anonymous function) ckeditor.js:222
n ckeditor.js:202
CKEDITOR.scriptLoader.load ckeditor.js:202
(anonymous function) ckeditor.js:221
(anonymous function) ckeditor.js:209
(anonymous function) ckeditor.js:207
n ckeditor.js:202
CKEDITOR.scriptLoader.load ckeditor.js:202
CKEDITOR.resourceManager.load ckeditor.js:206
f ckeditor.js:208
(anonymous function) ckeditor.js:209
n ckeditor.js:219
(anonymous function) ckeditor.js:219
(anonymous function) ckeditor.js:396
(anonymous function) ckeditor.js:207
n ckeditor.js:202
o ckeditor.js:202
q ckeditor.js:202
(anonymous function)

次のディレクティブを使用しています

var app = angular.module('Tutorial', [])
    .config(function($routeProvider, $locationProvider) {
    $routeProvider
        .when(/*routes like this */)
        .otherwise({ redirectTo: '/' })
})

app.directive('ckEditor', function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ngModel) {
      var ck = CKEDITOR.replace(elm[0]);

      if (!ngModel) return;

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

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

それから私のページに私は持っています

    <script src="/javascripts/ckeditor/ckeditor.js"></script>

    <textarea ck-editor ng-model="variableName"></textarea>

angular と ckeditor は初めてなので、ここで何が起こっているのかよくわかりません。エディターをページに配置し、モデルにバインドするだけです。このエラーの原因を誰かが知っていれば、大いに役立ちます。

ありがとう。

更新:@szaがフィドルが機能したとコメントした後、実際にはコード内の別のものであることを確認しました。

壊れたページへのリンクを別のページに追加して、問題のあるページに簡単に移動できるようにし、エディターが正しく読み込まれるようにしました。

    onclick="location.href=&quot;/#/controller/view&quot;"

ただし、URL を介してその場所に直接移動するたびに、エディターが機能しません。

4

0 に答える 0