Merge pull request #990 from Neoglyph/update/tinymce5-integration-documentation

Update/tinymce5 integration documentation

Author: streamtw

docs/integration.md

@@ -34,8 +34,54 @@ Check `vendor/unisharp/laravel-filemanager/src/views/demo.blade.php`, which alre
   $('textarea.my-editor').ckeditor(options);
   </script>
   ```
+  
+### Option 2: TinyMCE5
 
-### Option 2: TinyMCE4
+```html
+<script src="/path-to-your-tinymce/tinymce.min.js"></script>
+<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
+<script>
+  var editor_config = {
+    path_absolute : "/",
+    selector: 'textarea.my-editor',
+    relative_urls: false,
+    plugins: [
+      "advlist autolink lists link image charmap print preview hr anchor pagebreak",
+      "searchreplace wordcount visualblocks visualchars code fullscreen",
+      "insertdatetime media nonbreaking save table directionality",
+      "emoticons template paste textpattern"
+    ],
+    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
+    file_picker_callback : function(callback, value, meta) {
+      var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
+      var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
+
+      var cmsURL = editor_config.path_absolute + 'laravel-filemanager?editor=' + meta.fieldname;
+      if (meta.filetype == 'image') {
+        cmsURL = cmsURL + "&type=Images";
+      } else {
+        cmsURL = cmsURL + "&type=Files";
+      }
+
+      tinyMCE.activeEditor.windowManager.openUrl({
+        url : cmsURL,
+        title : 'Filemanager',
+        width : x * 0.8,
+        height : y * 0.8,
+        resizable : "yes",
+        close_previous : "no",
+        onMessage: (api, message) => {
+          callback(message.content);
+        }
+      });
+    }
+  };
+
+  tinymce.init(editor_config);
+</script>
+```
+
+### Option 3: TinyMCE4
 
 ```html
 <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
@@ -78,7 +124,7 @@ Check `vendor/unisharp/laravel-filemanager/src/views/demo.blade.php`, which alre
 </script>
 ```
 
-### Option 3: Summernote
+### Option 4: Summernote
 
 ```html
 <!-- dependencies (Summernote depends on Bootstrap & jQuery) -->