7

次のディレクティブを使用して ckEditor ビューを作成しています。データを保存するディレクティブには他の行がありますが、保存は常に機能するため、これらは含まれていません。

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

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

ウィンドウが表示されますが、ほとんどの場合、最初は空です。[SOURCE] ボタンをクリックしてソースを表示し、もう一度クリックすると、ウィンドウにデータが表示されます。

ck.getData を試し、出力をコンソールに記録したので、ck.setData が機能することは確かです。ただし、 ck.setData は最初にデータを表示しないようです。

ビュー ウィンドウの内容を強制的に表示する方法はありますか?

4

5 に答える 5

1

非常にシンプルで効果的なこの Java スクリプト コードを使用してください。注 editor1は私のテキストエリア ID です。

<script>
  $(function () {
    CKEDITOR.timestamp= new Date();
    CKEDITOR.replace('editor1');
  });
</script>

2番目の方法コントローラーでは、クエリがデータベースからデータをフェッチするときに、thを使用します

.success(function() の後のコードです。

 $http.get(url).success(function(){
   CKEDITOR.replace('editor1');
});
于 2016-07-25T08:11:46.547 に答える
1

これは、ckeditor がデフォルトで非表示になっている場合の ckeditor の奇妙な問題です。エディターを表示しようとすると、30% の確率でエディターが編集できなくなり、エディター データが消去されます。エディターを非表示/表示しようとしている場合は、position:absolute;left-9999px;エディターを非表示にし、css で元に戻すなどの css トリックを使用します。このようにして、ckeditor は DOM で削除されず、別の場所に配置されます。

于 2013-10-25T06:11:01.253 に答える
1

いつでもモデルで render を呼び出すことができ、指示したことは何でも実行します。あなたの場合、呼び出しngModel.$render()はを取得して$modelValueに渡しck.setData()ます。$renderAngular は、ダイジェスト サイクル中に必要なときはいつでも (つまり、モデルが更新されたことに気付くたびに)自動的に呼び出します。$modelValueただし、特にディレクティブがコンパイルされる前に が設定されている 場合、Angular が適切に更新されない場合があることに気付きました。

ngModel.$render()したがって、モーダル オブジェクトが設定されているときに簡単に呼び出すことができます。それに関する唯一の問題は、それを行うにはオブジェクトにアクセスする必要がngModelあることですが、これはコントローラーにはありません。私の提案は、次のことを行うことです。

コントローラーで:

$scope.editRow = function (row, entityType) {
   $scope.modal.data = row;
   $scope.modal.visible = true;
   ...
   ...
   // trigger event after $scope.modal is set
   $scope.$emit('modalObjectSet', $scope.modal);  //passing $scope.modal is optional
}

あなたのディレクティブで：

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

scope.$on('modalObjectSet', function(e, modalData){
    // force a call to render
    ngModel.$render();
});

これは特にクリーンなソリューションではありませんが、$render必要なときにいつでも呼び出すことができるはずです。それが役立つことを願っています。

更新：（更新後）

コントローラーがネストされていることに気づきませんでした。これは Angular では非常に厄介な問題になる可能性がありますが、考えられる解決策をいくつか提供しようと思います (すべてのコードとプロジェクトのレイアウトを確認することはできません)。スコープ イベント (ここで説明されているように) は、スコープのネストに固有であり、イベントを子スコープにのみ発行します。そのため、次の 3 つの解決策のいずれかを試すことをお勧めします (個人的な好みの順序でリストされています)。

1) コードを再編成してレイアウトを整理し (コントローラーのネストを減らし)、スコープが (兄弟コントローラーではなく) 直接の子孫になるようにします。

2) それ1)は不可能だったと思います。次に、関数を使用しようとし$scope.$broadcast()ます。そのための仕様もここにリストされています。$emitとの違い$broadcastは、$emit はイベントを子 $scope にのみ送信するのに対し、$broadcast はイベントを親スコープと子スコープの両方に送信することです。

3) angular でのイベントの使用を忘れて$scope、汎用の JavaScript イベントのみを使用します (フレームワークを使用するか、こちらjQueryの例のように独自のものをロールするだけです) 。

于 2013-10-14T16:04:26.760 に答える
0

私は、このスレッドが1年間死んでいることを知っていますが、同じ問題が発生し、この問題に対する別の(まだ醜い)解決策を見つけました:

instance.setData(html, function(){
  instance.setData(html);
});
于 2014-11-14T09:32:30.503 に答える