Skip to content

Commit 51eca9c

Browse files
youchenleeyouchenlee
committed
Enhance doc for CKEditor and TinyMCE integration.
1 parent c68b4fc commit 51eca9c

File tree

1 file changed

+94
-61
lines changed

1 file changed

+94
-61
lines changed

‎README.md

Lines changed: 94 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
# laravel-filemanager
22

3-
PR is welcome.
3+
A files and images management user interface with file uploading support. (Works well with CKEditor and TinyMCE)
4+
5+
PR is welcome!
46

57
## Overview
68

@@ -44,64 +46,88 @@ PR is welcome.
4446
php artisan vendor:publish --tag=lfm_config
4547
php artisan vendor:publish --tag=lfm_public
4648
```
47-
48-
1. Implementation:
49-
CKEditor
50-
```javascript
51-
<script>
52-
CKEDITOR.replace( 'editor', {
53-
filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
54-
filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
55-
filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
56-
filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
57-
});
58-
</script>
49+
50+
1. Ensure that the files & images directories (in `config/lfm.php`) are writable by your web server.
51+
52+
## WYSIWYG Editor Integration:
53+
### Option 1: CKEditor
54+
55+
1. Install (laravel-ckeditor)[https://github.com/UniSharp/laravel-ckeditor] package
56+
57+
1. Modify the views
58+
59+
Sample 1 - Replace by ID:
60+
```html
61+
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
62+
<textarea id="my-editor" name="content" class="form-control">{!! old('content', $content) !!}</textarea>
63+
<script>
64+
CKEDITOR.replace( 'my-editor', {
65+
filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
66+
filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
67+
filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
68+
filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
69+
});
70+
</script>
5971
```
60-
61-
TinyMCE 4
62-
```javascript
63-
<script>
64-
var editor_config = {
65-
path_absolute : "http://path_to_filemanager/",
66-
selector: "textarea",
67-
plugins: [
68-
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
69-
"searchreplace wordcount visualblocks visualchars code fullscreen",
70-
"insertdatetime media nonbreaking save table contextmenu directionality",
71-
"emoticons template paste textcolor colorpicker textpattern"
72-
],
73-
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
74-
relative_urls: false,
75-
file_browser_callback : function(field_name, url, type, win) {
76-
var w = window,
77-
d = document,
78-
e = d.documentElement,
79-
g = d.getElementsByTagName('body')[0],
80-
x = w.innerWidth || e.clientWidth || g.clientWidth,
81-
y = w.innerHeight|| e.clientHeight|| g.clientHeight;
82-
83-
var cmsURL = editor_config.path_absolute + 'filemanager/show?&field_name='+field_name+'&lang='+ tinymce.settings.language;
84-
85-
if(type == 'image') {
86-
cmsURL = cmsURL + "&type=images";
87-
}
88-
89-
tinyMCE.activeEditor.windowManager.open({
90-
file : cmsURL,
91-
title : 'Filemanager',
92-
width : x * 0.8,
93-
height : y * 0.8,
94-
resizable : "yes",
95-
close_previous : "no"
96-
});
97-
}
98-
};
99-
100-
tinymce.init(editor_config);
101-
</script>
72+
73+
Sample 2 - With JQuery Selector:
74+
75+
```html
76+
<script src="/vendor/unisharp/laravel-ckeditor/ckeditor.js"></script>
77+
<script src="/vendor/unisharp/laravel-ckeditor/adapters/jquery.js"></script>
78+
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
79+
<script>
80+
$('textarea.my-editor').ckeditor({
81+
filebrowserImageBrowseUrl: '/laravel-filemanager?type=Images',
82+
filebrowserImageUploadUrl: '/laravel-filemanager/upload?type=Images&_token={{csrf_token()}}',
83+
filebrowserBrowseUrl: '/laravel-filemanager?type=Files',
84+
filebrowserUploadUrl: '/laravel-filemanager/upload?type=Files&_token={{csrf_token()}}'
85+
});
86+
</script>
10287
```
10388
104-
1. Ensure that the files & images directories(in `config/lfm.php`) are writable by your web server
89+
### Option 2: TinyMCE4
90+
91+
```html
92+
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
93+
<textarea name="content" class="form-control my-editor">{!! old('content', $content) !!}</textarea>
94+
<script>
95+
var editor_config = {
96+
path_absolute : "/",
97+
selector: "textarea",
98+
plugins: [
99+
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
100+
"searchreplace wordcount visualblocks visualchars code fullscreen",
101+
"insertdatetime media nonbreaking save table contextmenu directionality",
102+
"emoticons template paste textcolor colorpicker textpattern"
103+
],
104+
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
105+
relative_urls: false,
106+
file_browser_callback : function(field_name, url, type, win) {
107+
var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
108+
var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
109+
110+
var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
111+
if (type == 'image') {
112+
cmsURL = cmsURL + "&type=Images";
113+
} else {
114+
cmsURL = cmsURL + "&type=Files";
115+
}
116+
117+
tinyMCE.activeEditor.windowManager.open({
118+
file : cmsURL,
119+
title : 'Filemanager',
120+
width : x * 0.8,
121+
height : y * 0.8,
122+
resizable : "yes",
123+
close_previous : "no"
124+
});
125+
}
126+
};
127+
128+
tinymce.init(editor_config);
129+
</script>
130+
```
105131
106132
## Config
107133
@@ -144,6 +170,7 @@ In `config/lfm.php` :
144170

145171
1. If the route is changed, make sure urls below is correspond to your route :
146172

173+
CKEditor
147174
```javascript
148175
<script>
149176
CKEDITOR.replace( 'editor', {
@@ -153,12 +180,17 @@ In `config/lfm.php` :
153180
</script>
154181
```
155182

156-
And be sure to include the `?type=Images` or `?type=Files` parameter.
183+
And be sure to include the `?type=Images` or `?type=Files` parameter.
157184

158-
TinyMCE
185+
TinyMCE
159186
```javascript
160187
...
161-
var cmsURL = editor_config.path_absolute + 'your-custom-route/show?&field_name='+field_name+'&lang='+ tinymce.settings.language;
188+
var cmsURL = editor_config.path_absolute + 'your-custom-route?field_name='+field_name+'&lang='+ tinymce.settings.language;
189+
if (type == 'image') {
190+
cmsURL = cmsURL + "&type=Images";
191+
} else {
192+
cmsURL = cmsURL + "&type=Files";
193+
}
162194
...
163195
```
164196

@@ -180,6 +212,7 @@ In `config/lfm.php` :
180212
* All contibutors from GitHub. (issues / PR)
181213
* Special thanks to
182214
* [@taswler](https://github.com/tsawler) the author.
183-
* [@welcoMattic](https://github.com/welcoMattic) providing fr locale and lots of bugfixes.
215+
* [@welcoMattic](https://github.com/welcoMattic) providing fr translations and lots of bugfixes.
216+
* [@fraterblack](https://github.com/fraterblack) TinyMCE 4 support and pt-BR translations.
184217
* [@olivervogel](https://github.com/olivervogel) for the awesome [image library](https://github.com/Intervention/image)
185-
* [@UniSharp members](https://github.com/UniSharp)
218+
* [All @UniSharp members](https://github.com/UniSharp)

0 commit comments

Comments
 (0)