I am working on an app that uses Summernote WYSIWYG wrapped in an angular directive. I am using the default behavior on image upload which is basically encoding the chosen image in base64 and putting that in as an <img> tag.

Unfortunately, when testing it, the image does get inserted into the box, however the whole site starts lagging really bad.

The code is basically:

in CreateController.js:

// This object holds all the post info self.post = {};

in create-view.html:

// This object holds all the post info <div id="summernote" summernote ng-model="Create.post.Content" config="Create.snOptions"> </div>

(using CreateController as Create )

The lag comes from the base64 encoded image included in the self.post.Content , that is being updated with the ng-model two-way binding every time a letter is typed.

I don't actually need the binding, it's perfectly ok for me to let the user type everything in and then click submit and process it, however I haven't found a way how to push the content of summernote into a method or into self.post.Content on submit of the form.

I tried not using ng-model and just passing a jQuery selection in the submit button like

<button type="submit" class="btn btn-success" ng-click="Create.send(angular.element("#summernote").html()">Send Report</button>`

however this selection returns nothing, as there are some more complex DOM elements in the summernote directive (Creator's JSFiddle demo)

Does anyone have any clue what I should do?

Thanks!