UniSharp laravel-filemanager integration with TinyMCE 5

Question

the documentation from Unisharp to integrate it with TinyMCE 4 :

<script>
var editor_config = {
  /* replace textarea having class .tinymce with tinymce editor */
  selector: "textarea.tinymce",
  path_absolute : "/",
  relative_urls: false,
  height: 129,
  file_browser_callback : function(field_name, value, type, meta) {
    var x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
    var y = window.innerHeight|| document.documentElement.clientHeight|| document.getElementsByTagName('body')[0].clientHeight;

    var cmsURL = editor_config.path_absolute + 'laravel-filemanager?field_name=' + field_name;
    if (type == 'image') {
        cmsURL = cmsURL + "&type=Images";
    } else {
        cmsURL = cmsURL + "&type=Files";
    }

    tinyMCE.activeEditor.windowManager.open({
      file : cmsURL,
      title : 'Gestionnaire de fichiers',
      width : x * 0.8,
      height : y * 0.8,
      resizable : "yes",
      close_previous : "no"
    });
  },




    /* theme of the editor
    theme: "modern",
    skin: "lightgray", */

    /* width and height of the editor */
    width: "100%",
    height: 500,

    /* display statusbar */
    statubar: true,

    /* plugin */
    plugins: [
        "advlist link image autolink autosave link image lists charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
        "save table directionality emoticons template paste"
    ],

    /* toolbar */
    toolbar: " insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | ltr rtl | insertfile media image link | forecolor backcolor | code preview fullscreen",

    /* style */
    style_formats: [
        {title: "Headers", items: [
            {title: "Header 1", format: "h1"},
            {title: "Header 2", format: "h2"},
            {title: "Header 3", format: "h3"},
            {title: "Header 4", format: "h4"},
            {title: "Header 5", format: "h5"},
            {title: "Header 6", format: "h6"}
        ]},
        {title: "Inline", items: [
            {title: "Bold", icon: "bold", format: "bold"},
            {title: "Italic", icon: "italic", format: "italic"},
            {title: "Underline", icon: "underline", format: "underline"},
            {title: "Strikethrough", icon: "strikethrough", format: "strikethrough"},
            {title: "Superscript", icon: "superscript", format: "superscript"},
            {title: "Subscript", icon: "subscript", format: "subscript"},
            {title: "Code", icon: "code", format: "code"}
        ]},
        {title: "Blocks", items: [
            {title: "Paragraph", format: "p"},
            {title: "Blockquote", format: "blockquote"},
            {title: "Div", format: "div"},
            {title: "Pre", format: "pre"}
        ]},
        {title: "Alignment", items: [
            {title: "Left", icon: "alignleft", format: "alignleft"},
            {title: "Center", icon: "aligncenter", format: "aligncenter"},
            {title: "Right", icon: "alignright", format: "alignright"},
            {title: "Justify", icon: "alignjustify", format: "alignjustify"}
        ]}
    ]
};

tinymce.init(editor_config);

</script>

the documentation on TinyMCE 5 says :

<script>
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  file_picker_callback: function(callback, value, meta) {
    // Provide file and text for the link dialog
    if (meta.filetype == 'file') {
      callback('mypage.html', {text: 'My text'});
    }

    // Provide image and alt text for the image dialog
    if (meta.filetype == 'image') {
      callback('myimage.jpg', {alt: 'My alt text'});
    }

    // Provide alternative source and posted for the media dialog
    if (meta.filetype == 'media') {
      callback('movie.mp4', {source2: 'alt.ogg', poster: 'image.jpg'});
    }
  }
});
</script>

so my question is there any possible way to make UniSharp laravel file manager working with TinyMCE 5 or tinyMCE.activeEditor.windowManager.open({file : cmsURL});}, is no longer supported ?

Answer 1

• Upgrade Tinymce to 5.0.6+

• Execute the following command if you have not previously executed:

  php artisan vendor:publish --tag=lfm_view

• In the "resources/views/vendor/laravel-filemanager/index.php" replace the

  {!! \File::get(base_path('vendor/unisharp/laravel-filemanager/public/js/script.js')) !!}

  with

  {!! \File::get(resource_path('assets/vendor/laravel-filemanager/script.js')) !!}

• Copy the "vendor/unisharp/laravel-filemanager/public/js/script.js" to "resources/assets/vendor/laravel-filemanager/script.js".

• 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: if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)

  with

  if ('tinymce5' === getUrlParam('editor')) { useTinymce5(url); } else if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)

• 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);
          }
      });
  }
  

  };

Download TinyMCE Community from here here