Update integration.md

Added integration instructions for summernote WYSIWYG editor

Author: Willem Leuverink

docs/integration.md

@@ -78,6 +78,63 @@ Check `vendor/unisharp/laravel-filemanager/src/views/demo.blade.php`, which alre
 </script>
 ```
 
+### Option 3: Summernote
+
+```html
+<!-- dependencies (Summernote depends on Bootstrap & jQuery) -->
+<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> 
+<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
+
+<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.css" rel="stylesheet">
+<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.3/summernote.js"></script>
+
+<!-- markup -->
+<textarea id="summernote-editor" name="content">{!! old('content', $content) !!}</textarea>
+
+<!-- summernote config -->
+<script>
+$(document).ready(function(){
+
+    // Define function to open filemanager window
+    var lfm = function(options, cb) {
+        var route_prefix = (options && options.prefix) ? options.prefix : '/laravel-filemanager';
+        window.open(route_prefix + '?type=' + options.type || 'file', 'FileManager', 'width=900,height=600');
+        window.SetUrl = cb;
+    };
+    
+    // Define LFM summernote button
+    var LFMButton = function(context) {
+        var ui = $.summernote.ui;
+        var button = ui.button({
+            contents: '<i class="note-icon-picture"></i> ',
+            tooltip: 'Insert image with filemanager',
+            click: function() {
+	    
+                lfm({type: 'image', prefix: '/file-manager'}, function(url, path) {
+                    context.invoke('insertImage', url);
+                });
+
+            }
+        });
+        return button.render();
+    };
+    
+    // Initialize summernote with LFM button in the popover button group
+    // Please note that you can add this button to any other button group you'd like
+    $('#summernote-editor').summernote({
+        toolbar: [
+            ['popovers', ['lfm']],
+        ],
+        buttons: {
+            lfm: LFMButton
+        }
+    })
+   
+});
+</script>
+```
+
 ## Standalone button
 If you are going to use filemanager independently, meaning set the value of an input to selected photo/file url, follow this structure: