11## Documents
2- 1 . [ Installation] ( https://github.com/UniSharp/laravel-filemanager/blob/master/docs/ installation.md )
3- 1 . [ Integration] ( https://github.com/UniSharp/laravel-filemanager/blob/master/docs/ integration.md )
4- 1 . [ Config] ( https://github.com/UniSharp/laravel-filemanager/blob/master/docs/ config.md )
5- 1 . [ Customization] ( https://github.com/UniSharp/laravel-filemanager/blob/master/docs/ customization.md )
6- 1 . [ Events] ( https://github.com/UniSharp/laravel-filemanager/blob/master/docs/ events.md )
7- 1 . [ Upgrade] ( https://github.com/UniSharp/laravel-filemanager/blob/master/docs/ upgrade.md )
2+ 1 . [ Installation] ( installation )
3+ 1 . [ Integration] ( integration )
4+ 1 . [ Config] ( config )
5+ 1 . [ Customization] ( customization )
6+ 1 . [ Events] ( events )
7+ 1 . [ Upgrade] ( upgrade )
88
99## Note
1010Check ` vendor/unisharp/laravel-filemanager/src/views/demo.blade.php ` , which already integrated all options from below.
1111
1212## WYSIWYG Editor Integration:
1313### Option 1: CKEditor
14- 1 . Install [ laravel-ckeditor] ( https://github.com/UniSharp/laravel-ckeditor ) package
1514
16- 1 . Modify the views
15+ ``` html
16+ <textarea id =" my-editor" name =" content" class =" form-control" textarea >
17+ <script src =" //cdn.ckeditor.com/4.6.2/standard/ckeditor.js" script >
18+ <script >
19+ var options = {
20+ filebrowserImageBrowseUrl: ' /laravel-filemanager?type=Images'
21+ filebrowserImageUploadUrl: ' /laravel-filemanager/upload?type=Images&_token={{csrf_token()}}'
22+ filebrowserBrowseUrl: ' /laravel-filemanager?type=Files'
23+ filebrowserUploadUrl: ' /laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
24+ };
25+ script >
26+ ```
27+
28+ * Sample 1 - Replace by ID:
1729
18- * Sample 1 - Replace by ID:
19-
20- ``` html
21- <script src =" /vendor/unisharp/laravel-ckeditor/ckeditor.js" script >
22- <textarea id =" my-editor" name =" content" class =" form-control" textarea >
23- <script >
24- CKEDITOR .replace ( ' my-editor'
25- filebrowserImageBrowseUrl: ' /laravel-filemanager?type=Images'
26- filebrowserImageUploadUrl: ' /laravel-filemanager/upload?type=Images&_token={{csrf_token()}}'
27- filebrowserBrowseUrl: ' /laravel-filemanager?type=Files'
28- filebrowserUploadUrl: ' /laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
29- });
30- </script >
31- ```
32-
33- * Sample 2 - With JQuery Selector:
34-
35- ```html
36- <script src =" /vendor/unisharp/laravel-ckeditor/ckeditor.js" script >
37- <script src =" //cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js" script >
38- <script src =" /vendor/unisharp/laravel-ckeditor/adapters/jquery.js" script >
39- <textarea name =" content" class =" form-control my-editor" textarea >
40- <script >
41- $ (' textarea.my-editor' ckeditor ({
42- filebrowserImageBrowseUrl: ' /laravel-filemanager?type=Images'
43- filebrowserImageUploadUrl: ' /laravel-filemanager/upload?type=Images&_token={{csrf_token()}}'
44- filebrowserBrowseUrl: ' /laravel-filemanager?type=Files'
45- filebrowserUploadUrl: ' /laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
46- });
47- </script >
48- ```
30+ ``` html
31+ <script >
32+ CKEDITOR .replace (' my-editor'
33+ </script >
34+ ```
4935
50- ### Option 2: TinyMCE4
36+ * Sample 2 - With JQuery Selector:
5137
5238 ``` html
53- <script src =" //cdn.tinymce .com/4/tinymce .min.js" script >
54- <textarea name = " content " class = " form-control my-editor " >{!! old('content', $content) !!}</ textarea >
39+ <script src =" //cdnjs.cloudflare .com/ajax/libs/jquery/1.11.2/jquery .min.js" script >
40+ <script src = " /vendor/unisharp/laravel-ckeditor/adapters/jquery.js " ></ script >
5541 <script >
56- var editor_config = {
57- path_absolute : " /"
58- selector: " textarea.my-editor"
59- plugins: [
60- " advlist autolink lists link image charmap print preview hr anchor pagebreak"
61- " searchreplace wordcount visualblocks visualchars code fullscreen"
62- " insertdatetime media nonbreaking save table contextmenu directionality"
63- " emoticons template paste textcolor colorpicker textpattern"
64- ],
65- toolbar: " insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media"
66- relative_urls: false ,
67- file_browser_callback : function (field_name , url , type , win ) {
68- var x = window .innerWidth || document .documentElement .clientWidth || document .getElementsByTagName (' body' 0 ].clientWidth ;
69- var y = window .innerHeight || document .documentElement .clientHeight || document .getElementsByTagName (' body' 0 ].clientHeight ;
70-
71- var cmsURL = editor_config .path_absolute + ' laravel-filemanager?field_name=' + field_name;
72- if (type == ' image'
73- cmsURL = cmsURL + " &type=Images"
74- } else {
75- cmsURL = cmsURL + " &type=Files"
76- }
77-
78- tinyMCE .activeEditor .windowManager .open ({
79- file : cmsURL,
80- title : ' Filemanager'
81- width : x * 0.8 ,
82- height : y * 0.8 ,
83- resizable : " yes"
84- close_previous : " no"
85- });
86- }
87- };
88-
89- tinymce .init (editor_config);
42+ $ (' textarea.my-editor' ckeditor (options);
9043 </script >
9144 ```
9245
93- ##Standalone button
94- If you are going to use filemanager independently, meaning set the value of an input to selected photo/file url, follow this structure:
46+ ### Option 2: TinyMCE4
9547
96- 1 . Create a button, input, and image preview holder if you are going to choose images.
48+ ``` html
49+ <script src =" //cdn.tinymce.com/4/tinymce.min.js" script >
50+ <textarea name =" content" class =" form-control my-editor" textarea >
51+ <script >
52+ var editor_config = {
53+ path_absolute : " /"
54+ selector: " textarea.my-editor"
55+ plugins: [
56+ " advlist autolink lists link image charmap print preview hr anchor pagebreak"
57+ " searchreplace wordcount visualblocks visualchars code fullscreen"
58+ " insertdatetime media nonbreaking save table contextmenu directionality"
59+ " emoticons template paste textcolor colorpicker textpattern"
60+ ],
61+ toolbar: " insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media"
62+ relative_urls: false ,
63+ file_browser_callback : function (field_name , url , type , win ) {
64+ var x = window .innerWidth || document .documentElement .clientWidth || document .getElementsByTagName (' body' 0 ].clientWidth ;
65+ var y = window .innerHeight || document .documentElement .clientHeight || document .getElementsByTagName (' body' 0 ].clientHeight ;
66+
67+ var cmsURL = editor_config .path_absolute + ' laravel-filemanager?field_name=' + field_name;
68+ if (type == ' image'
69+ cmsURL = cmsURL + " &type=Images"
70+ } else {
71+ cmsURL = cmsURL + " &type=Files"
72+ }
9773
98- Specify the id to the input and image preview by ` data-input ` and ` data-preview ` .
74+ tinyMCE .activeEditor .windowManager .open ({
75+ file : cmsURL,
76+ title : ' Filemanager'
77+ width : x * 0.8 ,
78+ height : y * 0.8 ,
79+ resizable : " yes"
80+ close_previous : " no"
81+ });
82+ }
83+ };
84+
85+ tinymce .init (editor_config);
86+ script >
87+ ```
88+
89+ ## Standalone button
90+ If you are going to use filemanager independently, meaning set the value of an input to selected photo/file url, follow this structure:
91+
92+ 1 . Create a button, input, and image preview holder if you are going to choose images.
93+ Specify the id to the input and image preview by ` data-input ` and ` data-preview ` .
9994
10095 ```html
10196 <div class="input-group">
@@ -108,21 +103,18 @@ If you are going to use filemanager independently, meaning set the value of an i
108103 </div>
109104 <img id="holder" style="margin-top:15px;max-height:100px;">
110105 ```
111-
112- 1. Import lfm.js(run `php artisan vendor:publish` if you need).
106+ 1 . Import lfm.js(run ` php artisan vendor:publish ` if you need).
113107
114108 ``` html
115109 <script src =" /vendor/laravel-filemanager/js/lfm.js" script >
116110 ```
117111
118- 1. Init filemanager with type. (requires jQuery)
112+ 1. Init filemanager with type. (requires jQuery)
119113
120114 ```javascript
121115 $('#lfm').filemanager('image');
122116 ```
123-
124117 or
125-
126118 ```javascript
127119 $('#lfm').filemanager('file');
128120 ```
0 commit comments