Can't integrate with summernote

[neo314]

I am trying to integrate elFinder with Summernote on Bootstrap 4.1.3. I have tried using the full package of jQueryUI and one with tooltip removed. I have tried rearranging the order of css and js loading several times. Nothing seems to fix the problem which is that elFinder does not show up, the font size dropdown stops showing the current size (something breaks on the toolbar), and it throws this error:

Error: TOOLTIP: Option "container" provided type "undefined" but expected type "(string|element|boolean)".

It is located in the bootstrap util.js here (starting line 128).

typeCheckConfig(componentName, config, configTypes) { for (const property in configTypes) { if (Object.prototype.hasOwnProperty.call(configTypes, property)) { const expectedTypes = configTypes[property] const value = config[property] const valueType = value && Util.isElement(value) ? 'element' : toType(value) if (!new RegExp(expectedTypes).test(valueType)) { throw new Error( '${componentName.toUpperCase()}: ' + 'Option "${property}" provided type "${valueType}" ' + 'but expected type "${expectedTypes}".') } } }

It looks to me like there is a conflict with tooltip function of Bootstrap and jQuery UI, which is a known issue, but the error occurs when I use jQueryUI without tooltip. That suggests to me that Summernote/elFinder wants jQueryUI's tooltip. Is that right and is there a fix?

[nao-pon]

@neo314 Plobably fixed with a17467e. Thanks! 👍

[neo314]

That didn't seem to make any difference. There is no change in the display. I made a simplified page to ensure nothing else was involved.

This is the order I am using to load the files.

<script src="/js/jQuery/jquery.min.js"></script>
<script src="/js/jQuery/jquery-ui.min.js"></script>
<script type="text/javascript">
	// Change JQueryUI plugin names to fix name collision with Bootstrap.
	//$.widget.bridge('uitooltip', $.ui.tooltip);
	//$.widget.bridge('uibutton', $.ui.button);
</script>
<script src="/js/bs/bootstrap.bundle.min.js"></script>


<script src="/test/summernote/summernote-bs4.min.js"></script>
<script src="/test/summernote/plugin/summernote-ext-elfinder/summernote-ext-elfinder.js"></script>
<script src="/test/elFinder/js/elfinder.full.js"></script>
<script type="text/javascript">
      $(function() {
        $('.summernote').summernote({
          height: 200,
          tabsize: 2,
          toolbar: [
    		// [groupName, [list of button]]
    		['style', ['bold', 'italic', 'underline', 'clear']],
    		['font', ['strikethrough', 'superscript', 'subscript']],
   		 	['fontsize', ['fontsize']],
    		['color', ['color']],
    		['para', ['ul', 'ol', 'paragraph']],
    		['height', ['height']],
			['insert', ['elfinder']]
  		]
        });
      });
      function elfinderDialog(context){ // <------------------ +context
        var fm = $('
').dialogelfinder({
            url : '/test/elFinder/php/connector.minimal.php',
            lang : 'en',
            width : 840,
            height: 450,
            destroyOnClose : true,
            getFileCallback : function(file, fm) {
                console.log(file);
                // $('.editor').summernote('editor.insertImage', fm.convAbsUrl(file.url)); ...before
                context.invoke('editor.insertImage', fm.convAbsUrl(file.url)); // <------------ after
            },
            commandsOptions : {
                getfile : {
                    oncomplete : 'close',
                    folders : false
                }
            }
        }).dialogelfinder('instance');
    }
    </script>

This is the simple form I am using to test the code. The form will not submit and no js code to process the form is included because the editor does not work at this point. I changed the angle brackets to square brackets because the HTML keeps rendering even using the code ticks.

[form action="/test/test.php" enctype="multipart/form-data"]
[h1]Test Form[/h1]
[nput type="hidden" name="html" value="" /]
[div class="summernote"][/div]
[input type="button" name="frmSubmit" value="Submit Form" /]
[/form]

[neo314]

I should mention that the 2 $.widget.bridge lines are supposed to resolve the conflict between UI and BS by changing the function names of the UI functions for button and tooltip, but the elFinder fix does not work whether or not those lines are commented out.

[nao-pon]

@neo314 For correspondence on the elFinder side, button and tooltip of jQueryUI are enabled. Bootstrap's button and tooltip are stored in elFinderInstance.noConflicts.button and elFinderInstance.noConflicts.tooltip.

[neo314]

Thanks Nao-pon, I'm looking at the noConflict function, but I am not sure how the information you provided helps me and I think the issue should be reopened. I understand that elFinder and Summernote worked together with BS 3.x, but are they to work together with BS 4? I got the impression hat the most wide use of elFinder with an editor was with Summernote, but maybe that is incorrect.

Looking at that function, the fix in a17467e adds tooltip to the check but it did not seem to solve the issue. Any advise on how to proceed? I am not sure this is a matter of Summernote being adapted to elFinder as elFinder is being used as a plugin to Summernote.

[nao-pon]

This seems to be a problem with summernote or summernote-ext-elfinder. Disabling the tooltip setting of summernote-ext-elfinder will gone the problem.

        // create button
        var button = ui.button({
          contents: '<i class="fa fa-list-alt"/> File Manager',
          //tooltip: 'elfinder',
          click: function () {
              elfinderDialog($(this).closest('.note-editor').parent().children('.summernote'));
          }
        });

[neo314]

Thanks. That seems to be making progress and makes sense. I get the popup now. On the popup, I immediately get an error that the backend is not found, but that is probably on my end configuring elFinder. I'll look at it more tomorrow.

[neo314]

Ok, so I think I have it working now. Your button fix doesn't work with multiple editors. It always adds content to the first editor because it is going back to the top of the dom and targets the first same class element it encounters.

I came up with this.

click: function () { elfinderDialog($(this).closest('.note-editor').prev('[data-editor="summernote"]')); } });

You have to add a data attribute to the DIV's or TEXTAREA's being turned into summernote editors. Summernote hides the converted element and inserts the editor just below. This turns out to be the element just before the closest '.note-editor'. With this method, the content will be added to the correct editor.