1

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!

valorl
  • 1,499
  • 2
  • 14
  • 30
  • Write a custom function for `onImageUpload` as described here http://stackoverflow.com/questions/21628222/summernote-image-upload#answer-22589018 then manually process (base64 encode) the `img src` attributes on form submit. – Sergiu Paraschiv Mar 07 '16 at 16:59
  • @SergiuParaschiv Can you elaborate ? What do you mean by "manually process"? and Why would I need to make a custom `onImageUpload` ? The uploaded image gets encoded to base64 fine, the problem is in the databinding watcher that slows everything down. And even if I make a function that gets called on form submit, one of my problems as I have mentioned is that I cannot quite find a way how to extract the contents from summernote inside of that function. – valorl Mar 07 '16 at 18:28
  • You can't rely on Summernote WYSIWYG to serialize the images because it does so every time you change the content. So you need to disable that somehow. As far as I understand, overriding `onImageUpload` is the way to do that. Next step you'll need to do the serialization yourself before saving. – Sergiu Paraschiv Mar 07 '16 at 20:42
  • I assume you think the summernote code is re-encoding the image on each $digest of Angular. I do not understand why would that be the case, the image has already been encoded and there's a fully working base 64 img tag inside of summernote's textarea. I don't think the `onImageUpload` will get triggered again unless I try to upload another image. – valorl Mar 08 '16 at 11:04
  • But then some processing done by Summernote is triggered by $digest and is causing the lag, that's what you described at least. if it's not the images then it's something else. I'm also guessing you won't be able to use `ng-model` on it but will have to come up with your own solution. – Sergiu Paraschiv Mar 08 '16 at 11:05

0 Answers0