UniSharp / Laravel Filemanager和TinyMCE集成

时间:2017-04-16 18:08:15

标签: javascript laravel wysiwyg tinymce-4 file-manager

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

WYSIWYG编辑器在浏览器中正确显示,我也可以单击图像上传按钮。但是,我看到屏幕显示Objec未找到错误。

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引导设置。

2 个答案:

答案 0 :(得分:0)

我认为您应该尝试将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>

答案 1 :(得分:0)

您可以尝试使用Laravel Simple File Manager。 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

的详细文档