3

データバインディングを備えたWYSIWYGエディター用のAngularJSでCKEditorを使用しようとしていますが、すべてがうまく機能しているようです。高度な構成可能性は、要件のマッチングに大いに役立ちました。

現在、ダーティ フォームの問題に直面しています。

問題：

model -> abc<br>def\n

ckeditor dataprocessor makes it -> abc<br />def

これは、モデルとエディタのコンテンツの同等性を壊し、フォームを汚します。

私が望むのは、初期化後に前処理された値でモデルを設定して、平等が維持されるようにすることだけです。

Angular コードは次のとおりです。

app.directive('contenteditable', function() {

return {

        require : 'ngModel',

        link : function(scope, element, attrs, ctrl) {

            var editor = CKEDITOR.inline(element[0]);

            // view -> model

            editor.on('pasteState', function() {

                scope.$apply(function() {

                    ctrl.$setViewValue(editor.getData());
                });

            });

            // model -> view

            ctrl.$render = function() {

                editor.setData(ctrl.$viewValue);

            };

            // load init value from DOM

            ctrl.$render();

        }

    };

});

かなりの検索を行いましたが、明らかに推奨されていないプラグインをオフにする以外に何も見つかりませんでした. 助言がありますか？

- 編集 -

ディレクティブで:

editor.on('instanceReady', function() {
    scope.$apply(function() {
        ctrl.$setViewValue(editor.getData());
        scope.$broadcast('resetContentEditableModel');
    });
});

コントローラーで：

$scope.$on('resetContentEditableModel', function() {
    $scope.model.value = $scope.form.value;
});

これはうまくいっているようです。

4

1 に答える 1

0

次の 2 つの方法があると思います。

  1. データをエディターにロードした後、モデルを更新します。Angular についてはわかりませんが、これが可能であれば、これが最良の選択です。CKEditor またはブラウザが無効な HTML を修正しようとする場合があるため、これらを同期するとよいでしょう。

  2. 自己終了タグのレンダリング方法を変更できるselfClosingEnd構成オプションがあります。htmlwriter

    editor.on( 'loaded', function() {
    editor.dataProcessor.writer.selfClosingEnd = '>';
} );
于 2013-06-22T20:27:28.427 に答える