Laravel + tinymce4 + RoxyFileBrowser

So i am using tinymce4 with RoxyFileBrowser in laravel php framework with this config

{{ 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 problem using filemanager to place images, in tinymce4 you click the insert image button and then click the magnifying glass icon folder next to the original textbox to call roxyfilebrowser and then select the images and revert the image path back to the original text field

Things got weird from here, for example there is a path to the image in the original textbox

/js/tinymce/plugins/fileman/Uploads/Images/20121008_102000.jpg

but when i click the oke button the image will be displayed in tinymce editor but when i try to save it and see it in my database it will be saved as

<img src="../../js/tinymce/plugins/fileman/Uploads/Images/20121008_102000.jpg" alt="" width="448" height="336" />

      

there is an extra src image before the image

../../

so how to fix it? so my database will have

<img src="/js/tinymce/plugins/fileman/Uploads/Images/20121008_102000.jpg" alt="" width="448" height="336" />

      

+3


source to share





All Articles