inline CKEditor + AngularJS + dataprocessing

Question

我想用CKEditor和AngularJS進行數據綁定的WYSIWYG編輯器，所有東西似乎都運行良好。我們的需求匹配極大地提高了可配置性。

我們現在面臨一個髒的問題。

問題：

model -> abc<br>def\n 

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

打破模型&編輯內容相等，並因此導致形式是骯髒。

所有我想要的是在初始化後設置預處理值的模型，以便等式保持不變。

這裏是角碼吧：

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

我認爲有兩種方式：

1. 更新您的數據加載到編輯後的模型。我不知道Angular，但如果這是可能的，這將是最好的選擇。 CKEditor或瀏覽器可能會嘗試修復一些無效的HTML，因此可以很好地同步這些東西。

2. htmlwriter有selfClosingEnd configuration option這將允許您更改自我關閉標記的呈現方式。

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