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. Существует selfClosingEnd configuration option для htmlwriter, который позволит вам изменить способ отображения самозакрывающихся тегов.

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