dialogelfinder is not a function error

[2braincells2go]

Hi. Thanks for the plugin, been looking for something like this for summernote.

After a few hours for trying and reading, cannot find a solution to error produced after click the "File Manager" button:

elfinder-callback.js:2 - Uncaught TypeError: $(...).dialogelfinder is not a function

I have tried all the way back to elfinder V2.1.9 and no change in error.

Here is my head layout just in case I have wrong:

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

  <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>

  <script src="plugin/summernote-ext-elfinder/summernote-ext-elfinder.js"></script>
  <script src="plugin/summernote-ext-elfinder/elfinder-callback.js"></script>

  <script type="text/javascript" src="plugin/template/summernote-ext-template.js"></script>

Then my summernote config:

$(document).ready(function() {
    $('#summernote').summernote({
        height: 500,
        tabsize: 2,
        toolbar: [
            ['style', ['bold', 'italic', 'underline', 'clear']],
            ['insert', ['template', 'elfinder']]
          ],
          template: {
        path: 'tpls',
        list: [ 
            'header',
            'para',
         'form'
        ]
    },
    });

Have read the posts on stackoverflow and github, no luck in getting working. Any input/suggestions greatly appreciated.

Woody

[ghost]

Your not including the <script src="<path>/elfinder.js"></script> script, and put the callback code inline on the page your calling Summernote from. I have the below function before calling SN:

function mediaDialog(id,t,c){
                var fm=$('<div/>').dialogelfinder({
                    url:'<url path to the elfinder conector.php>',
                    lang:'en',
                    width:840,
                    height:450,
                    destroyOnClose:true,
                    getFileCallback:function(files,fm){
                        if(id>0){
                            $('#block').css({display:'block'});
                            $('#'+c).val(files.url);
                            $('#'+c+'image').attr('src',files.url);
                            update(id,t,c,files.url);
                        }else{
                            $('.summernote').summernote('editor.insertImage',files.url);
                        }
                    },
                    commandsOptions:{
                        getfile:{
                            oncomplete:'close',
                            folders:false
                        }
                    }
                }).dialogelfinder('instance');
            }

[semplon]

hello @2braincells2go. My Bad, sorry for that. I think my readme file is not correct. So after i test it. these how the code should work.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.14/css/elfinder.full.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.14/js/elfinder.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/elfinder/2.1.14/css/theme.min.css">
<script type="text/javascript" src="https://github.com/semplon/summernote-ext-elfinder/raw/master/summernote-ext-elfinder.js"></script>

<script type='text/javascript'>

$(function() {
  $('#summernote').summernote({
    height: 200,
    tabsize: 2,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']],
      ['insert', ['elfinder']]
    ]
  });
});
function elfinderDialog() {
    var fm = $('<div/>').dialogelfinder({
    url : 'https://path.to/your/connector.php', // change with the url of your connector
    lang : 'en',
    width : 840,
    height: 450,
    destroyOnClose : true,
    getFileCallback : function(files, fm) {
    console.log(files);
    $('.editor').summernote('editor.insertImage', files.url);
    },
    commandsOptions : {
    getfile : {
        oncomplete : 'close',
        folders : false
    }
    }

    }).dialogelfinder('instance');
}

</script>

[2braincells2go]

Thank you @StudioJunkyard and @semplon, much appreciated.

After little rest, coffee and re-reading got it working.

Cannot get the filemanager to insert image into summernote though. Filemanger opens, can see images, upload images and no errors in dev console.

I am of course assuming filemanager is capable of inserting images with a click or drag?

Woody

[semplon]

Hi @2braincells2go it's should can insert the image. please capture the browser console. you can try my cms and see how it works. see this video for demo https://www.youtube.com/watch?v=lQKIgIR_aWk

[2braincells2go]

Nice CMS @semplon ! Looks like you running tinymce or ckeditor?

Inserting image not working for me on summernote. Here is what I see:

http://screencast-o-matic.com/watch/cDjYopiPtZ

[semplon]

no @2braincells2go it's using summernote and elFinder. The elFinder themes was override using custom css. you can see how it's work by downloading it from https://github.com/semplon/GeniXCMS that should can give you comparison about the code you use and mine.

[2braincells2go]

@semplon, that makes sense - looking at video did not look like summernote.

Will download your cms and compare. Thank you much for input.

[2braincells2go]

@semplon I installed GeniXCMS, Nice CMS!

I cannot locate where your elfinder connector file is? Like to inspect so can troubleshoot why I cannot insert images into my summernote.

Cannot drag and drop or use insert. Thinking some type of permission error. Perhaps I can solve my issue by looking at your elfinder connector settings.

Thanks again for help and input.

[semplon]

hi @2braincells2go the connector is located at inc/lib/Control/Ajax/elfinder.control.php

it's moved from default elfinder directory, so the directory had to be set. it's customized already, to fit with my cms.

So to see how it works, you must compare with the connector.php at the elfinder directory. that file located at studio-42/elfinder/php/connector.php-dist

i hope this can help

thanks

[2braincells2go]

Have not gotten it working. Must be my setup (ie; using #summernote and also textarea verses div area).

Going to close and try again later. Students will just have to live with default images for now.

Thank you both for your help.

[mcpdeveloper443]

Hi @semplon semplon ,

I followed below url for summernote-ext-elfinder.js:35 Uncaught ReferenceError: elfinderDialog is not defined

I could not able to solve this issue , please help on this, When i click on file manager , i am getting above error i tried all possibilities. but no luck!

https://github.com/semplon/summernote-ext-elfinder/issues/2#issuecomment-241180894

Thanks for your help appreciated !