Integrating CKEditor into elFinder

Question

I'm sure this has been covered before as I've found similar posts but unfortunately non that work for me in this scenario.

Basically what I have is the elFinder and CKEditor side by side on a page. What I'm looking to do is open the files contents into CKEditor when the file is double clicked, or when edit is clicked from the contextMenu.

Please could someone advise on how I could achieve this.

Thank you

score 1 · Answer 1 · answered Apr 23 '14 at 10:51

After some experimentation I've come up with the following. It's the same as the code for integrating tinyMCE but the "editors" parameter is as follows (I'm assuming you are using the jQuery adapter):

         editors: [{
              mimes: ['text/html'],
              load: function(textarea) {
                 $(textarea).ckeditor();
              },
              close: function(textarea, instance) {
                CKEDITOR.instances[textarea.id].destroy();
              },
              save: function(textarea, editor) {
                  textarea.value = $(textarea).val();
              }

            }
          ]

Rachel Gallen · Answer 2 · 2013-05-24T10:42:11.703

this is code given in the elfinder forum:

CKEDITOR.on('dialogDefinition', function(event) {
    var editor = event.editor;
    var dialogDefinition = event.data.definition;
    var dialogName = event.data.name;

    var tabCount = dialogDefinition.contents.length;
    for(var i = 0; i < tabCount; i++) {
        var browseButton = dialogDefinition.contents[i].get('browse');

        if (browseButton !== null) {
            browseButton.hidden = false;
            browseButton.onClick = function(dialog, i) {

            $('<div \>').dialog({modal:true,width:"80%",title:'elFinder',zIndex: 99999,
            create: function(event, ui) {
            $(this).elfinder({
            resizable:false,
            //lang:'ru', // Optional
            url : /elfinder/php/connector.php?mode=image',
            getFileCallback : function(url) {
            if($('input#cke_118_textInput').is(':visible')){
                $('input#cke_118_textInput').val(url);
            } else {
                $('input#cke_79_textInput').val(url);
            }

            $('a.ui-dialog-titlebar-close[role="button"]').click()
            }
    }).elfinder('instance')
    }

             })  
            }
        }
    }
});

also refer to http://stackoverflow.com/questions/12985676/need-to-integrate-elfinder-file-manager-with-ckeditor/14346535 if you haven't already — Rachel Gallen, May 24 '13 at 10:39
Yer I've had a look at both. The code I believe is to open elfinder as the image browser in CKeditor. I'm looking for something the other way round. CKEditor opens in elFinder. The second link you sent me seems to be what I'm looking for, the code given doesnt seem to work on its own and I cant make much sense of the question. — Oliver Evans, May 24 '13 at 12:20
Scratch that. Both seem to be the opposite way round. Opening elfinder in CKEditor. — Oliver Evans, May 24 '13 at 12:22

Integrating CKEditor into elFinder

2 Answers2