我正在尝试将 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;
});
这似乎起到了作用。
最佳答案
我认为有两种方法:
将数据加载到编辑器后更新模型。我不知道 Angular,但如果可能的话这将是最好的选择。 CKEditor 或浏览器可能会尝试修复一些无效的 HTML,因此最好同步这些内容。
有一个
selfClosingEnd
configuration option对于htmlwriter
,它允许您更改自结束标记的呈现方式。editor.on( 'loaded', function() { editor.dataProcessor.writer.selfClosingEnd = '>'; } );
关于angularjs - 内联 CKEditor + AngularJS + 数据处理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17252422/