Open pratamatama opened 5 years ago
Hello i have same error i use file_piker_callback but it's not work and have some error abot body and other in js please help me
Hello! We have the same problem. tinyMCE 5 + Laravel File Manager 1.8 doesn't work.
Same issue for me as well.
I have same issue. how i want to fixed it?
Failed path: (dialog)
Could not find valid *strict* value for "body" in {
"url": "http://localhost:3000/laravel-filemanager?type=Images",
"width": 320,
"height": 240,
"title": "Filemanager"
},Failed path: (dialog)
Could not find valid *strict* value for "buttons" in {
"url": "http://localhost:3000/laravel-filemanager?type=Images",
"width": 320,
"height": 240,
"title": "Filemanager"
}
Input object: {
"url": "http://localhost:3000/laravel-filemanager?type=Images",
"width": 320,
"height": 240,
"title": "Filemanager"
}
i've tried every possible way been busy for 3 days to figure a solution out but no luck came across this pull : https://github.com/tinymce/tinymce/issues/4786
hope if it will help someone make it work using iframe
Hello! Sorry for my English.
Here is a quick fix.
1) Upgrade Tinymce to 5.0.4.
2) Execute the following command if you have not previously executed:
php artisan vendor:publish --tag=lfm_view
3) In the "resources/views/vendor/laravel-filemanager/index.php" replace the
{!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/script.js')) !!}
to
{!! \File::get(resource_path('assets/vendor/laravel-filemanager/script.js')) !!}
4) Copy the "vendor/unisharp/laravel-filemanager/public/js/script.js" to "resources/assets/vendor/laravel-filemanager/script.js".
5) Open the "resources/assets/vendor/laravel-filemanager/script.js" and after function "useTinymce3" insert the follow code:
function useTinymce5(url) {
parent.postMessage({
mceAction: 'insert',
content: url
});
parent.postMessage({ mceAction: 'close' });
}
Then replace it:
if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)
to:
if ('tinymce5' === getUrlParam('editor')) {
useTinymce5(url);
} else if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)
6) Config the Tinymce (https://unisharp.github.io/laravel-filemanager/integration):
var editor_config = {
// ...
file_picker_callback: function (callback, value, meta) {
let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
let type = 'image' === meta.filetype ? 'Images' : 'Files',
url = editor_config.path_absolute + 'laravel-filemanager?editor=tinymce5&type=' + type;
tinymce.activeEditor.windowManager.openUrl({
url : url,
title : 'Filemanager',
width : x * 0.8,
height : y * 0.8,
onMessage: (api, message) => {
callback(message.content);
}
});
}
};
is it secure calling url = editor_config.path_absolute + 'laravel-filemanager?editor=tinymce5&type=' + type;
without token
Yes. About the "token" in the documentation nothing says.
P.S. If you need to protect routes, assign them middleware.
The file manager does not open. All items fulfilled. What could be the problem?
Does the browser console display any errors?
Does the browser console display any errors?
When i open filemanager everything is working, but after uploading file and clicking to image its shows me image popup in another page, but not use image ((( , How too fix that?
Hello! Sorry for my English.
Here is a quick fix.
1. Upgrade Tinymce to 5.0.4. 2. Execute the following command if you have not previously executed: `php artisan vendor:publish --tag=lfm_view` 3. In the "resources/views/vendor/laravel-filemanager/index.php" replace the `{!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/script.js')) !!}` to `{!! \File::get(resource_path('assets/vendor/laravel-filemanager/script.js')) !!}` 4. Copy the "vendor/unisharp/laravel-filemanager/public/js/script.js" to "resources/assets/vendor/laravel-filemanager/script.js". 5. Open the "resources/assets/vendor/laravel-filemanager/script.js" and after function "useTinymce3" insert the follow code:
function useTinymce5(url) { parent.postMessage({ mceAction: 'insert', content: url }); parent.postMessage({ mceAction: 'close' }); }
Then replace it:
if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)
to:
if ('tinymce5' === getUrlParam('editor')) { useTinymce5(url); } else if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)
1. Config the Tinymce (https://unisharp.github.io/laravel-filemanager/integration):
var editor_config = { // ... file_picker_callback: function (callback, value, meta) { let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight; let type = 'image' === meta.filetype ? 'Images' : 'Files', url = editor_config.path_absolute + 'laravel-filemanager?editor=tinymce5&type=' + type; tinymce.activeEditor.windowManager.openUrl({ url : url, title : 'Filemanager', width : x * 0.8, height : y * 0.8, onMessage: (api, message) => { callback(message.content); } }); } };
Yeah, this is definitely working fix and helped me a lot. But as of writing now this is a partial solution, I managed to integrate laravel filemanager with Tinymce v5 but when trying to add image source input was empty and in the console was an error:
can't access property "value", parent.document.getElementById(...) is null
. This is using useTinymce4AndColorbox()
function.
So I changed URL parameters to use useTinymce5()
. In this case, I got no errors but the source field was empty for some reason.
parent.postMessage({ mceAction: 'close' });
Successfully closes the modal but parent.postMessage({ mceAction: 'insert', content: url });
doesn't insert the chosen image URL. After reading TinyMCE docs their API has mceAction: 'insertContent'
, and mceAction: 'setContent'
, attributes which does work but places image URL in the editor itself rather than in source field in the modal.
So, I went back to useTinymce4AndColorbox()
function and changed a little bit:
in script.js
parent.document.getElementById(getUrlParam('field_name')).value = url;
changed to
parent.document.querySelector(`[type="${getUrlParam('field_name')}"]`).value = url;
and in file_picker_callback
var cmsURL = window.location.origin + '/laravel-filemanager?field_name=' + meta.fieldname;
changed to
var cmsURL = window.location.origin + '/laravel-filemanager?field_name=' + 'url';
Hope this will help someone...
If anybody knows a better and elegant solution to this, I'm more than happy to listen!
How it work for me:
I added this code and all work good:
<script>
tinymce.init({
selector: 'textarea.my-editor',
plugins: 'a11ychecker advcode casechange formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker image searchreplace wordcount textcolor colorpicker',
toolbar: 'a11ycheck casechange code formatpainter pageembed permanentpen table image file searchreplace',
toolbar_mode: 'floating',
tinycomments_mode: 'embedded',
tinycomments_author: 'Authorname',
image_caption: true,
relative_urls: false,
file_picker_types: 'file image media',
file_picker_callback: function (callback, value, meta) {
let x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
let y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;
let type = 'image' === meta.filetype ? 'Images' : 'Files',
url = '/laravel-filemanager?editor=tinymce5&type=' + type;
tinymce.activeEditor.windowManager.openUrl({
url : url,
title : 'Filemanager',
width : x * 0.8,
height : y * 0.8,
onMessage: (api, message) => {
callback(message.content);
}
});
}
});
</script>
I don't know if this is a bug/not yet supported feature from laravel-filemanager or the tinyMCE 5 it self but I just want to make sure. I'm trying to integrate this package (version 1.8) using tinyMCE 5 but it seems to be not working.