CODEWITHSUNDEEP
javascriptphpckeditor4.xelfinder
freedom_wings
freedom_wings

Reputation: 21

How to open different dialog with ckeditor 4 type (link, image, flash)

I have some troubles when integrated elFinder into my CMS. I'm using it with CKEditor 4 as the integrated method with JQuery UI in their guide. Image upload and image manager is all good but i don't know how to open different dialog for different file type and folder like how can i config elFinder to open a new dialog file manager for flash files and folder for store flash files (different from images folder) when i click "Flash" button in my editor and then "Browse Server". The same as when i click "Link" button and "Browse Server", the dialog should show for diffrent folder that store doc and pdf file. I've also try something like this in the main.ckedialog.js i loaded into my page:

if ($('#content').length > 0) {
    var editor = CKEDITOR.replace('content', {
        language: 'en',
        filebrowserBrowseUrl: '#',
        //extraPlugins: 'uploadimage,image2',
        extraPlugins: 'uploadimage',
        filebrowserImageBrowseUrl: 'admin/includes/elFinder/php/connector.minimal.php',
        filebrowserImageBrowseLinkUrl: 'admin/includes/elFinder/php/connector.minimal.php',
        filebrowserImageUploadUrl: 'admin/includes/elFinder/php/connector.minimal.php',
        filebrowserFlashUploadUrl: 'admin/includes/elFinder/php/connector.doc.php',
        filebrowserFlashBrowseUrl: 'admin/includes/elFinder/php/connector.doc.php',

        ImageBrowseUrl: 'admin/includes/elFinder/php/connector.minimal.php',
        ImageBrowseLinkUrl: 'admin/includes/elFinder/php/connector.minimal.php',
        ImageUploadUrl: 'admin/includes/elFinder/php/connector.minimal.php',
        FlashUploadUrl: 'admin/includes/elFinder/php/connector.doc.php',
        FlashBrowseUrl: 'admin/includes/elFinder/php/connector.doc.php',
    });
    CKEDITOR.config.height = 500;
    CKEDITOR.config.defaultLanguage = 'en';
    editor.addCommand("mySimpleCommand", { // create named command
        exec: function (edt) {
            alert(edt.getData());
        }
    });
}

Here is the button i want to use to open elFinder dialog for file manager

Here the button i using

Hope someone can help. Thanks.

Upvotes: 0

Views: 400

Answers (1)

freedom_wings
freedom_wings

Reputation: 21

After can't find anything on google, i found a way to solve my problem using some dirty trick. So i think it's still some official way to do it right. Here is the solution for any one need it:

  1. Define second variable to php connector using for second dialog (in my case is connector.doc.php) in main.ckedialog.js like this

    var elfNode, elfNode1, elfNode2, elfInsrance, dialogName, elfUrl = 'admin/includes/elFinder/php/connector.minimal.php', // Your connector's URL elfUrl1 = 'admin/includes/elFinder/php/connector.doc.php',

  2. Check for the button at "CKEDITOR.on('dialogDefinition', function (event) {" in main.ckedialog.js find line "if (elfNode) {" and cut it into if else (dialogName) like this

if (dialogName === 'image') { if (elfNode) { if (elfDirHashMap[dialogName] && elfDirHashMap[dialogName] != elfInsrance.cwd().hash { ... elfNode.dialog('open'); } } else if (dialogName == 'link') { if (elfNode1) { ... elfNode1.dialog('open'); } }

  1. Find line "CKEDITOR.on('instanceReady', function(e) {" in main.ckedialog.js, copy all code in it's function and paste it right after content you copied and then rename "elfNode" within the block you copied and pasted to "elfNode1", change "url: elfUrl," to "url: elfUrl1," also the "onlyMimes" to your needed configures

(Sorry but i still don't know how to use pre tag for my code in stackoverflow editor, sometime it work, sometime it doesn't)

Now it worked. Still looking for better way to do it. Thanks

Upvotes: 0

Related Questions