1

我正在使用 CKEditor 进行内联编辑，并且我想将一个元素绑定到一个角度范围值。

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

testval 应该以与在编辑器外部相同的方式更新。

为了在编辑器中保护这个文本，我想做一些类似于placeholder plugin的事情。换句话说，我计划有一个占位符，动态显示最终文本而不仅仅是占位符。

我已经看到了几个如何将整个内容与有角度的而不是单个元素绑定的示例。我对 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 回答