Question

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

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

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

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

我已经看过几个如何用角度而不是单个元素绑定整个内容的例子。我仍然是角度和ckeditor相当新的，所以任何帮助或指针将非常感激。

Answer 1

听起来我需要使用指令来满足您的需求。我可能会因为我并不完全熟悉而感到沮丧，但是根据你提供的内容，我们假设这个例子。

<强> 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>'
    });

仍然不确定我是否完全理解，但如果我越来越近，请告诉我。

Answer 2

我假设您要将模型中的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);

            }); 
        }
    };
}]);

内联ckeditor内的角度绑定

2 个答案: