Hello, This post is related to WYSIWYG editors. Many times you might have a situation where you need to add images to your content or list of item in your content etc. To handle this situation we can use summer note WYSIWYG editor.SummerNote is an Open source free WYSIWYG editor (summer note) build to support Bootstrap theme framework. Summernote uses open source libraries(jQuery, Bootstrap)
Installation Of Summernote:
i. Download the summer note plugin.
ii. Include Js and CSS files.
iii. Add div into body <div id=”summer note”>Hello Summernote</div>
iv.Initialize summer note
OnImageUpload With Summernote
Sometimes we need to add images to our content and store that images to AWS.
But a problem is when we upload images using summer note it will convert images to Base64 data which is too large and it will be difficult for us to store this data to database as well as upload image to AWS s3 storage. To avoid this problem summer note provides OnImageUpload callback which helps to upload the image with proper URL and store image directly to s3 storage.
Below is the example of callback we used to store images to database as well as on the server.
i. I have Attachment model which stores all images.
ii. Here is the post method which creates a record for attachment and stored them on server
iii. call ajax on this method and upload an image with summer note callback.
sendFile is a function which creates record and inserts image to content on a success of ajax request. Then in summer note initialization we use callback OnImageUpload.
Note: In above example sendFile function is used to check for multiple files if there is any and add them individually to s3 storage with proper URL.
Follow me on Twitter