tinymce 4:如何创建自己的文件管理器?

Posted

技术标签:

【中文标题】tinymce 4:如何创建自己的文件管理器?【英文标题】:tinymce 4: how to create your own file manager? 【发布时间】:2013-07-30 19:29:20 【问题描述】:

我正在尝试制作自己的文件浏览器,以便我可以从我的文件管理中选择图像并将其发送到 tinymce 的图像链接字段,但我无法在其他任何地方找到有关如何实现此目的的任何进一步信息。

这是在插入/编辑图像顶部打开一个新弹出窗口的代码,

file_browser_callback: function(field_name, url, type, win) 

    //tinymce.activeEditor.windowManager.close();
    //console.log(field_name);

    tinymce.activeEditor.windowManager.open(
        title: 'Browse Image',
        file: "yourbrowser.php?field=" + field_name + "&url=" + url,
        width: 450,
        height: 305,
        resizable : "no",
        inline : "yes",
        close_previous : "no",
        buttons: [
            text: 'Insert',
            classes: 'widget btn primary first abs-layout-item',
            disabled: true,
            onclick: 'close'
        , 
            text: 'Close',
            onclick: 'close',
            window : win,
            input : field_name
        ]
    );

    return false;
,

这是我卡住的地方 - 如何从文件管理器中选择图像并将其发送到插入/编辑图像弹出窗口中的图像链接?

下面是我到目前为止的全部代码,

$(document).ready(function()

        $('.button').click(function()

            // @reference: http://www.tinymce.com/wiki.php/api4:method.tinymce.remove#
            if(tinyMCE.editors.length > 0) 

                // Remove all editors bound to textareas
                //tinymce.remove('textarea');

                // Remove all editors
                tinymce.remove();
            

            $('.content').load('full.html', function() 

                if(tinyMCE.editors.length == 0) 

                    tinymce.init(
                        //selector: "textarea",
                        mode : "textareas",
                        editor_selector : "mce-customised",
                        editor_deselector : "not-editor",
                        theme: "modern",
                        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"
                        ],
                        toolbar1: "insertfile undo redo | styleselect | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                        toolbar2: "print preview media | forecolor backcolor emoticons",
                        image_advtab: true,

                        file_browser_callback: function(field_name, url, type, win) 

                            //tinymce.activeEditor.windowManager.close();
                            //console.log(field_name);

                            tinymce.activeEditor.windowManager.open(
                                title: 'Browse Image',
                                file: "yourbrowser.php?field=" + field_name + "&url=" + url,
                                width: 450,
                                height: 305,
                                resizable : "no",
                                inline : "yes",
                                close_previous : "no",
                                buttons: [
                                    text: 'Insert',
                                    classes: 'widget btn primary first abs-layout-item',
                                    disabled: true,
                                    onclick: 'close'
                                , 
                                    text: 'Close',
                                    onclick: 'close',
                                    window : win,
                                    input : field_name
                                ]
                            );

                            return false;
                        ,


                        // Specifying an Absolute Image Path
                        document_base_url : "http://localhost/test/2013/js/tinymce/tinymce_4.0.2/",
                        relative_urls : false,
                        remove_script_host : false,


                        image_list: "image_list.php",
                        link_list: "link_list.php"
                    );

                    $('.button-submit').submit_form();
                

            );

            return false;
        );

    );

test site。

或者,你知道有什么好的文件管理器插件可以和tinymce一起工作吗?

【问题讨论】:

你看过tinymce.com/wiki.php/…应该会给一些见解。 谢谢。看过并测试过它,它适用于 TinyMCE 3.x。我正在研究 TinyMCE 4.... 【参考方案1】:

也许你应该在这里找到有用的信息:Configuration:file_browser_callback

win.document.getElementById(field_name).value = 'my browser value';

这里:tinymce forum

【讨论】:

以上是关于tinymce 4:如何创建自己的文件管理器?的主要内容,如果未能解决你的问题,请参考以下文章

使用响应式文件管理器和 tinymce - 创建用户会话

vue项目如何使用tinymce5

vue项目如何使用tinymce5

如何将 TinyMCE 保存为文件?

TinyMCE反应,传入的数据无法动态呈现

TinyMCE插件:Filemanager [4.x-6.x] 文件名统一格式化