3

我正在尝试将 CKEditor 与 AngularJS 一起用于具有数据绑定的所见即所得编辑器，并且一切似乎都运行良好。极端的可配置性对我们的需求匹配有很大帮助。

我们现在面临一个脏表格的问题。

问题：

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

我认为有两种方法：

  1. 将数据加载到编辑器后更新模型。我不知道 Angular，但如果可能的话，这将是最好的选择。CKEditor 或浏览器可能会尝试修复一些无效的 HTML，因此最好同步这些内容。

  2. 有一个selfClosingEnd配置选项可htmlwriter让您更改自闭合标签的呈现方式。

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