UniSharp/Laravel Filemanager 和 TinyMCE 集成

Posted 2023-03-07

【中文标题】UniSharp/Laravel Filemanager 和 TinyMCE 集成

【英文标题】：UniSharp/Laravel Filemanager and TinyMCE integration

【发布时间】：2017-04-16 18:08:15

【问题描述】：

我已经完成了 laravel 项目的全新安装，只是为了尝试使用 UniSharp 文件管理器的 tinyMCE。我已经按照 github https://github.com/UniSharp/laravel-filemanager 上的指南完成了 UniSharp + tinyMCE 的安装。

所见即所得编辑器在浏览器中正确显示，我还可以单击图像上传按钮。但是，我得到的屏幕显示 Objec not found 错误。

Object Not Found

我的设置代码如下所示。原创！

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
          <textarea name="content" class="form-control my-editor"></textarea>
          <script>
            var editor_config = 
              path_absolute : "/",
              selector: "textarea.my-editor",
              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"
              ],
              toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
              relative_urls: false,
              file_browser_callback : function(field_name, url, type, win) 
                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 : 'Filemanager',
                  width : x * 0.8,
                  height : y * 0.8,
                  resizable : "yes",
                  close_previous : "no"
                );
              
            ;

            tinymce.init(editor_config);
          </script>

有什么想法可能是错的吗？

正如我所说 - 这是一个全新的 Laravel 项目，带有 tinyMCE 和 UniSharp 引导设置。

【参考方案1】：

我认为您应该尝试将 absolute_path 更改为 path_absolute : "http://localhost/project-name/public/"

整个脚本看起来像这样

<script>
    var editor_config = 
        path_absolute : "http://localhost/project-name/public/",
        selector: "textarea.my-editor",
        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"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media",
        relative_urls: false,
        file_browser_callback : function(field_name, url, type, win) 
            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 : 'Filemanager',
                width : x * 0.8,
                height : y * 0.8,
                resizable : "yes",
                close_previous : "no"
            );
        
    ;

    tinymce.init(editor_config);
</script>

【讨论】：

path_absolute : "localhost/project-name/public" .. 这会更清楚

【参考方案2】：

你可以试试 Laravel 简单文件管理器。 3 个简单的安装步骤，非常容易与 TinyMCE、CKEditor 或 Summernote 集成。

GitHub： https://github.com/haruncpi/laravel-simple-filemanager

TinyMce 集成

<textarea id="tinymce">

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>
    window.onload = function () 
        tinymce.init(
            selector: '#tinymce',
            plugins:'image',
            file_browser_callback: filemanager.tinyMceCallback
        );
    
</script>

Laravel Simple File Manager的详细文档