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:publish --tag=lfm_view
在“资源/视图/供应商/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”复制到 “资源/资产/供应商/laravel-filemanager/script.js”。
打开“资源/资产/供应商/laravel-filemanager/script.js”，然后在函数“ useTinymce3”之后插入以下代码：

function useTinymce5(url) { parent.postMessage({ mceAction: 'insert', content: url }); parent.postMessage({ mceAction: 'close' }); } 然后替换： 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: 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);
        }
    });
}
```
};

从此处下载TinyMCE社区 here

UniSharp laravel-filemanager与TinyMCE 5集成

1 个答案: