Friday 15 May 2015

inline CKEditor + AngularJS + dataprocessing -


I am trying to use CKEditor with the AngularJS for WYSIWYG editor with data binding and everything properly doing work. Highly configurable helped us with matching requirements.

Now we are facing a problem dirtyly.

Issue:

  Model - & gt; ABC & lt; Br> DEF \ nckeditor creates datatrocessor - & gt; ABC & lt; Br / & gt; Def   

which breaks the model & amp; The editor causes the similarities of content and therefore become dirty.

Whatever I want to do, it is to set the model with preprocessed value after initialization so that there is equality.

Here's the angle code:

  app.directive ('contenteditable', function) (return {Required: 'ngmodel', link: function (scope, element, Attrs, ctrl) {var editor = CKEDITOR.inline (element [0]); // visual -> model editor.one ('pastestate', function () {radius $ apply (function () {ctrl. $ SetViewValue (editor.getData ());});}); // model -> see ctrl. $ Render = function () {editor.setData (ctrl. $ ViewValue);}; // Load INIT value DOM Ctrl $. $ Render ();}}}});   

I did a lot of searching, but nothing was found except to close the plugin, which is not explicitly recommended. Any suggestions?

- Edit -

In the command:

  editor.on ('instanceReady', function () { Scope $. (Function () {ctrl. $ SetViewValue (editor.getData ()); Scope. $ Broadcast ('Reset Content Edit Modell');});});   

  $ range in the controller. $ ('ResetcontentEditableModel', function () {$ scope.model.value = $ scope.form value;});   

It seems that this is the trick.

I think there are two ways:

  1. Update your model after loading the data to the editor I do not know angular, but if this is possible then this will be the best option. CKEditor or browser can try to fix some invalid HTML so that these things will look good for syncing.

  2. htmlwriter is the one that will allow you to change how the self closing tags are provided.

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

No comments:

Post a Comment