14

私は最新の CKEditor (標準バージョン) を使用しており、この 質問に基づいて、次のような角度ディレクティブを実装しました。

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

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

CKEditor GUI モードで何かを入力しているときに正常に動作しています。ここでは、入力したコンテンツを textarea の ng-model に取得しています。

しかし、コードエディターに切り替えると、GUI に切り替えた後でも更新されたコンテンツが取得されません。グラフィカル モードで何かをもう一度入力する必要があります。

私のディレクティブの何が問題になっていますか? または、このディレクティブを他の CKEditor イベントで拡張できますか?

フォーム送信などのイベントをさらに追加したい。

ここでデモ。

4

4 に答える 4

9

この質問には既に回答があったことは知っていますが、CKEditor 4.4.4 を angularjs 1.2 と統合するために必要なことを説明したいと思います。これが私のコーヒースクリプトのコードです：

'use strict'

angular.module 'core', []

.directive 'ckeditor', ->
    require: '?ngModel'
    link: (scope, element, attrs, ngModel) ->
        config =
            # CKEditor config goes here

        editor = CKEDITOR.replace element[0], config

        return unless ngModel

        editor.on 'instanceReady', ->
            editor.setData ngModel.$viewValue

        updateModel = ->
            scope.$apply ->
                ngModel.$setViewValue editor.getData()

        editor.on 'change', updateModel
        editor.on 'dataReady', updateModel
        editor.on 'key', updateModel
        editor.on 'paste', updateModel
        editor.on 'selectionChange', updateModel

        ngModel.$render = ->
            editor.setData ngModel.$viewValue

コーヒースクリプトの読み書きができない人のために、コンパイルされたjavascriptは次のとおりです。

'use strict';
angular.module('core', []).directive('ckeditor', function() {
    return {
      require: '?ngModel',
      link: function(scope, element, attrs, ngModel) {
        var config, editor, updateModel;
        config = {
            // CKEditor config goes here
        }
        editor = CKEDITOR.replace(element[0], config);
        if (!ngModel) {
          return;
        }
        editor.on('instanceReady', function() {
          return editor.setData(ngModel.$viewValue);
        });
        updateModel = function() {
          return scope.$apply(function() {
            return ngModel.$setViewValue(editor.getData());
          });
        }};
        editor.on('change', updateModel);
        editor.on('dataReady', updateModel);
        editor.on('key', updateModel);
        editor.on('paste', updateModel);
        editor.on('selectionChange', updateModel);
        return ngModel.$render = function() {
          return editor.setData(ngModel.$viewValue);
        };
      }
    };
  }
);

次にHTMLで：

<textarea ckeditor data-ng-model="myModel"></textarea>

では、説明を。

完全を期すために貼り付けと選択変更ハンドラーを追加しましたが、選択変更ハンドラーが必要であることが判明しました。すべてを選択して削除を押すと、エディタからフォーカスを外さずにフォームを送信しても、送信時に変更がモデルに反映されないことがわかりました。選択変更ハンドラーはその問題を解決します。

CKEditor を angularjs と統合することは、私のプロジェクトにとってミッション クリティカルであるため、「落とし穴」が見つかった場合は、この回答を更新します。

于 2014-09-01T06:47:32.673 に答える
0

問題が私のものと似ていることを願っています。CK エディターには、DOM に挿入する独自の要素があり、Angular は既にレンダリングされているため、コード エディターに移行するときにリスナーを設定する必要があります。変更をリッスンしていない場合、Angular は DOM の変更を認識していないため、適切にバインドできません。tinymceとポップアップするモーダルで似たようなものに遭遇しました。

これは私の問題に関連する別のリソースです

于 2013-09-25T16:46:31.300 に答える