1

CKEditor でインライン編集を使用しており、要素を角度スコープ値にバインドしたいと考えています。

<div contentEditable="true">
   <p>Here is the value: {{testval}}</p>
</div>

testval は、エディター外と同じ方法で更新する必要があります。

エディターでこのテキストを保護するために、プレースホルダー プラグインと同様のことをしたいと思います。言い換えれば、単なるプレースホルダーではなく、最終的なテキストを動的に表示するプレースホルダーを用意する予定です。

個々の要素ではなく角度のあるコンテンツ全体をバインドする方法の例をいくつか見てきました。私はまだangularとckeditorの両方にかなり慣れていないので、助けや指針をいただければ幸いです。

4

2 に答える 2

0

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

$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:23:26.117 に答える
0

必要なものにディレクティブを使用する必要があるように思えます。私は完全に精通しているわけではないので、少しずれているかもしれませんが、あなたが提供したものに頼って、この例を想定しましょう。

html

<body ng-app="myApp">
    <div content-editable content="content"></div>
</body>

JavaScript

angular.module('myApp', [])
    .directive('contentEditable', function() {
        restrict: 'A',
        replace: true,
        scope: {
            // Assume this will be html content being bound by the controller
            // In the controller you would have:
            // $scope.content = '<div>Hello World</div>'
            content: "=" 
        },
        template: '<div contentEditable="true"><p>Here is the value {{ content }}</p></div>'
    });

完全に理解しているかどうかはまだわかりませんが、近づいている場合はお知らせください。

于 2013-10-04T01:20:04.083 に答える