'how to stop tinymce to replace path starting with /public/assets... with ../../../../public/assets...?

I am using alexusmai laravel file manager together with tinyMCE. When LFM returns the path of a selected file in the insert/edit image window it is correct. It must include the public folder as I am on shared hosting /public/assets....

As soon as the insert/edit image window is closed, the url inserted in tinyMCE displays the logo/image correctly. When I look in the code editor the url is converted to ../../../../public/assets....

Even if I edited the path in the code editor and save, tinyMCE changes it back as soon as I return to the wysiwyg editor. In a way it's ok as it works but I would prefer that the path is kept as given by the user or LFM.

Is there anyway to stop tinyMCE to do that?

Here is the js code I use to initialise the editor:

window.onload = function () {
  tinymce.init({
    selector: '#{{ $field->name }}',
    height: 600,
    plugins: [
        'image paste importcss searchreplace autolink preview',
        'code visualblocks visualchars fullscreen image link media template',
        'table charmap hr insertdatetime lists wordcount textpattern charmap quickbars emoticons help',
    ],
    menubar: 'file edit view insert format tools table help',
    toolbar: [
        'code fullscreen preview | bold italic underline | image media template link | formatselect fontsizeselect | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | forecolor backcolor | charmap emoticons | removeformat undo redo'
    ],
    templates: [
        { title: 'Row Ani Img L', description: 'Row with animnated image on left', content: rowL },
        { title: 'Row Ani Img R', description: 'Row with animnated image on right', content: rowR }
    ], 
    content_css: '{{ makeURLabsolute(config('path')['public'].'custom/'.config('site.array_names')['file'].'.css',config('is_web')) }}',
    branding: false,
    toolbar_sticky: true,
    toolbar_mode: 'sliding',
    file_picker_callback (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
        tinymce.activeEditor.windowManager.openUrl({
            url : '/file-manager/tinymce5',
            title : 'Asset Manager',
            width : x * 0.8,
            height : y * 0.8,
            onMessage: (api, message) => {
                callback(message.content, { text: message.text })
            }
        })
    }
  });
};


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source