1

Angular 1.2.0-rc.3 (1.2.0-rc.2 から)に変更しただけで、インライン エディターのディレクティブが機能しなくなりました。

通常モードでは問題なく動作しますが、インラインでは動作しません。

これを修正する方法を知っている人はいますか？

ありがとう。

app.directive('uiCkeditor', [function() {
        return {
            require: '?ngModel',
            link: function(scope, element, attrs, ngModel) {
                if (!ngModel)
                    return; 

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

                 // var ck = CKEDITOR.replace(element[0]);
                 var ck = CKEDITOR.inline(element[0])

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

            }
        }
    }])
4

1 に答える 1

1

ng-bind-html を使用してモデルの内容をレンダリングし、ディレクティブ ck-inline を作成してインライン機能を追加し、インライン エディターで発生する変更にモデルをバインドしました。このディレクティブが機能するには ng-bind-html が必要であり、モジュールに ngSanitize を追加する必要もあります。要素にディレクティブ ck-inline を追加すると、正常に動作するはずです。

通常のエディターには異なる動作があり、ng-model ディレクティブだけで十分に機能するため、別のディレクティブを使用することをお勧めします。

$timeout も使用します。そうしないと、テキストがレンダリングされ、ckeditor がモデルを台無しにするすべての値を何らかの形で削除することに気付いたからです (これは、非インライン オプションでは発生しません)。これがコードです。

yourModule.directive('ckInline', ['$sce', '$timeout', function($sce, $timeout){
    return{
        require : '?ngBindHtml',
        scope:{value:"=ngBindHtml"},
        link : function(scope, elm, attr, ngBindHtml)
        {
            $timeout(function()
            {
                var ck_inline;
                elm.attr("contenteditable", "true");
                CKEDITOR.disableAutoInline = true;
                ck_inline = CKEDITOR.inline(elm[0]);

                if (!attr.ngBindHtml)
                    return;

                ck_inline.on('instanceReady', function()
                {
                    ck_inline.setData(elm.html());
                });

                function updateHtml()
                {
                    scope.$apply(function()
                    {
                        scope.value = $sce.trustAsHtml(ck_inline.getData());
                    });
                }


                ck_inline.on('blur', updateHtml);
                ck_inline.on('dataReady', updateHtml);

            }); 
        }
    };
}]);
于 2014-05-11T05:28:17.480 に答える