javascript - UniSharp laravel-filemanager 与 TinyMCE 5 集成

Question

来自 Unisharp的文档 将其与 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>

有关 TinyMCE 5 的文档 说:

<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>

所以我的问题是有没有可能的方法使 UniSharp laravel 文件管理器 与 TinyMCE 5 或 tinyMCE.activeEditor.windowManager.open({file : cmsURL});}, 不再支持？

Answer 1

• 将 Tinymce 升级到 5.0.6+

• 如果您之前没有执行过，请执行以下命令:

  php artisan vendor :发布 --tag=lfm_view

• 在“resources/views/vendor/laravel-filemanager/index.php”中替换

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

  与

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

• 将“vendor/unisharp/laravel-filemanager/public/js/script.js”复制到“资源/ Assets /vendor/laravel-filemanager/script.js”。

• 打开“resources/assets/vendor/laravel-filemanager/script.js”并在函数“useTinymce3”之后插入以下代码:

  函数 useTinymce5(url) {
父.postMessage({
mceAction: '插入',
内容:网址
});
parent.postMessage({ mceAction: '关闭' });
}然后替换:if (window.opener || window.tinyMCEPopup || field_name || getUrlParam('CKEditorCleanUpFuncNum') || is_ckeditor)

  与

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

• 配置 Tinymce(https://unisharp.github.io/laravel-filemanager/integration):

  var editor_config = {
//...
file_picker_callback:函数(回调，值，元){
让 x = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
让 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);
          }
      });
  }
  

  };

从此处下载 TinyMCE 社区 here