2

angularJSでCKEditorを使用しています。以下の 2 つのエディター ウィンドウがあります。

    {{ modal.data.text }}
    <textarea
         id="Textarea1"
         data-ck-editor
         data-ng-disabled="modal.action=='delete'"
         data-ng-model="modal.data.text"></textarea>
    {{ modal.data.notes }}
    <textarea
        id="Textarea2"
        data-ck-editor
        data-ng-disabled="modal.action=='delete'"
        data-ng-model="modal.data.notes"></textarea>

このアプリケーションでは、ユーザーがグリッド内の行を選択できるようにし、次に以下を実行してモーダル オブジェクトに新しいデータを入力します。エディター インスタンスは、新しい行が選択されるたびにではなく、起動時に作成されることに注意してください。

$scope.modal.data = row;

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

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

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

                    ck.on('instanceReady', function() {
                        ck.setData(ngModel.$viewValue);
                    });

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

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

ユーザーが行を選択してからタブを選択すると、データが「時々」表示され、通常は表示されません。

これをテストしているときに、関数をコメントアウトすることに気付きました: ck.on('pasteState', function() t は、データが更新されていることを示しています。

誰かが私にできることについてアドバイスをくれて助けてくれませんか? {{ modal.data.text }} と {{ modal.data.notes }} はレンダリングされますが、通常、CKEditor ウィンドウにはデータが表示されません。また、「pasteState」の機能は何ですか?また、CKEditor ウィンドウでキーストロークを実行すると、AngularJS モデルはどのように更新されますか? 最後の質問。これは、複数のエディター ウィンドウでも機能しますか。エディターのインスタンスが 2 つ作成されますか?

4

1 に答える 1