Question

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

我们现在面临着脏形式的问题。

问题：

model -> abc<br>def\n

ckeditor dataprocessor makes it -> abc<br />def

打破了模特＆amp;编辑内容平等，从而导致形式变脏。

我想要的只是在初始化之后用预处理的值设置模型，以便保持相等。

以下是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;
});

这似乎就是这样做的。

Answer 1

我认为有两种方式：

将数据加载到编辑器后更新模型。我不知道Angular，但如果可能的话，这将是最好的选择。 CKEditor或浏览器可能会尝试修复一些无效的HTML，以便同步这些内容。
htmlwriter有一个selfClosingEnd configuration option，可让您更改自闭项标记的呈现方式。
```
editor.on( 'loaded', function() {
    editor.dataProcessor.writer.selfClosingEnd = '>';
} );
```

内联CKEditor + AngularJS +数据处理

1 个答案: