Question

我试图将响应式文件管理器集成到我的tinymce中，最后得到大部分工作，除了你可以在tinymce的插入/编辑图像中放置一个响应式文件管理器的部分。响应式文件管理器按钮在我的工具栏中完美显示，但不在下面的图像上

enter image description here

上面的图片是当我点击tinymce insert / edit image时显示的内容。

我想要发生的是它在源文本框旁边有一个响应式文件管理器按钮，就像这里可以找到的那样

http://www.responsivefilemanager.com/demo.php

下面是我的代码

脚本

var base = $("#base").val(); //base value is equal to <?php echo base_url();?>
 tinymce.init({
                selector: "textarea.mce",
                theme: "modern",
                image_advtab: true,
                relative_urls:false,
                plugins: [
                     "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                     "save table contextmenu directionality emoticons template paste textcolor responsivefilemanager"
               ],
               content_css: "css/content.css",
               toolbar: "insertfile undo redo | styleselect | bold italic | blockquote | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image advimage media responsivefilemanager", 

               external_filemanager_path:base+"adminlibraries/js/ResponsiveFilemanager-master/filemanager/",
               filemanager_title:"Responsive Filemanager" ,
               external_plugins: { "filemanager" : ""+base+"/adminlibraries/js/ResponsiveFilemanager-master/filemanager/plugin.min.js"},
               style_formats: [
                    {title: 'Bold text', inline: 'b'},
                    {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
                    {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
                    {title: 'Table styles'},
                    {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'},
    {title: 'Image Left', selector: 'img', styles: {
                    'float' : 'left', 
                    'margin': '0 10px 0 10px'
            }},
            {title: 'Image Right', selector: 'img', styles: {
                    'float' : 'right', 
                    'margin': '0 10px 0 10px'
            }},
                ],
         });

我错过了什么吗？

感谢

Answer 1

我遇到了这个问题，因为我包含了错误的＆＃34; plugin.min.js＆＃34;文件在TinyMCE设置中。有两个＆＃34; plugin.min.js＆＃34;文件：1位于主文件管理器文件夹内，1位于TinyMCE库的插件文件夹内。

所以要明确一点，在设置过程中你应该有这样的东西：

external_plugins: { "filemanager" : "YOUR_PATH/plugin.min.js"}

...其中YOUR_PATH是保存＆＃34; plugin.min.js＆＃34;的文件夹的路径。文件管理器主文件夹中的文件而不是＆＃34; plugin.min.js＆＃34; TinyMCE文件管理器插件目录中的文件。

Answer 2

我在Reponsivefilemanager官方网站上找到了一些代码。我尝试了它，它对我有用，在你的tinymce选项中添加这两个参数：

     file_picker_types: 'file image media',
     file_picker_callback: function (cb, value, meta) {
            var width = window.innerWidth - 30;
            var height = window.innerHeight - 60;
            if (width > 1800)width = 1800;
            if (height > 1200)height = 1200;
            if (width > 600) {
                var width_reduce = (width - 20) % 138;
                width = width - width_reduce + 10;
            }
            var urltype = 2;
            if (meta.filetype == 'image') {
                urltype = 1;
            }
            if (meta.filetype == 'media') {
                urltype = 3;
            }
            var title = "RESPONSIVE FileManager";
            if (typeof this.settings.filemanager_title !== "undefined" && this.settings.filemanager_title) {
                title = this.settings.filemanager_title;
            }
            var akey = "key";
            if (typeof this.settings.filemanager_access_key !== "undefined" && this.settings.filemanager_access_key) {
                akey = this.settings.filemanager_access_key;
            }
            var sort_by = "";
            if (typeof this.settings.filemanager_sort_by !== "undefined" && this.settings.filemanager_sort_by) {
                sort_by = "&sort_by=" + this.settings.filemanager_sort_by;
            }
            var descending = "false";
            if (typeof this.settings.filemanager_descending !== "undefined" && this.settings.filemanager_descending) {
                descending = this.settings.filemanager_descending;
            }
            var fldr = "";
            if (typeof this.settings.filemanager_subfolder !== "undefined" && this.settings.filemanager_subfolder) {
                fldr = "&fldr=" + this.settings.filemanager_subfolder;
            }
            var crossdomain = "";
            if (typeof this.settings.filemanager_crossdomain !== "undefined" && this.settings.filemanager_crossdomain) {
                crossdomain = "&crossdomain=1";
                if (window.addEventListener) {
                    window.addEventListener('message', filemanager_onMessage, false);
                } else {
                    window.attachEvent('onmessage', filemanager_onMessage);
                }
            }
            tinymce.activeEditor.windowManager.open({
                title: title,
                file: this.settings.external_filemanager_path + 'dialog.php?type=' + urltype + '&descending=' + descending + sort_by + fldr + crossdomain + '&lang=' + this.settings.language + '&akey=' + akey,
                width: width,
                height: height,
                resizable: true,
                maximizable: true,
                inline: 1
            }, {
                setUrl: function (url) {
                    cb(url);
                }
            });
      }

Answer 3

让它工作我只需要将我的tinymce更新到最新版本

响应式Filemanager浏览图标不会出现在tinymce插入/编辑图像窗口中

3 个答案: