So i'm using tinymce4 with RoxyFileBrowser in laravel php framework with this configuration
{{ HTML::script('js/tinymce/tinymce.min.js') }}
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
skin: 'light',
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons | fontselect fontsizeselect",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
],
file_browser_callback: RoxyFileBrowser
});
function RoxyFileBrowser(field_name, url, type, win) {
var roxyFileman = '{{ asset('js/tinymce/plugins/fileman/index.html?integration=tinymce4') }}';
if (roxyFileman.indexOf("?") < 0) {
roxyFileman += "?type=" + type;
}
else {
roxyFileman += "&type=" + type;
}
roxyFileman += '&input=' + field_name + '&value=' + document.getElementById(field_name).value;
tinyMCE.activeEditor.windowManager.open({
file: roxyFileman,
title: 'File Manager',
width: 800,
height: 480,
resizable: "yes",
plugins: "media",
inline: "yes",
close_previous: "no"
}, { window: win, input: field_name });
return false;
}
</script>
and there is some weird issue about using filemanager to put images, in tinymce4 you click the insert image button and then click folder with magnifying glass icon beside source textbox to call roxyfilebrowser and then select the images and it will return image path to source textbox
Things got weird from here, for example, in my source textbox there image path is
/js/tinymce/plugins/fileman/Uploads/Images/20121008_102000.jpg
but when i press oke button the image will appear in tinymce editor but when i tried to save it and see in my database it saved to be like this
<img src="../../js/tinymce/plugins/fileman/Uploads/Images/20121008_102000.jpg" alt="" width="448" height="336" />
there is additional in front of the image src
../../
so how to fix that? so it will appear in my database to be
<img src="/js/tinymce/plugins/fileman/Uploads/Images/20121008_102000.jpg" alt="" width="448" height="336" />