angularjs - 内联 CKEditor + AngularJS + 数据处理

Question

我正在尝试将 CKEditor 与 AngularJS 结合使用，用于具有数据绑定(bind)的 WYSIWYG 编辑器，一切似乎都运行良好。极端的可配置性对我们的需求匹配有很大帮助。

我们现在面临表单脏乱的问题。

问题:

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

在 Controller 中:

$scope.$on('resetContentEditableModel', function() {
    $scope.model.value = $scope.form.value;
});

这似乎起到了作用。

Answer 1

我认为有两种方法:

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

2. 有一个 selfClosingEnd configuration option对于 htmlwriter ，它允许您更改自结束标记的呈现方式。

   editor.on( 'loaded', function() {
       editor.dataProcessor.writer.selfClosingEnd = '>';
   } );