Comment ajouter une image dans le gestionnaire de Summernote éditeur WYSIWYG?

comme on le voit sur mon post à summernote github question. https://github.com/summernote/summernote/issues/1203

c'est ce que je fais pour intégrer le gestionnaire de fichiers elFinder avec Summernote.

Créer le Bouton dans l'Éditeur

(function (factory) {
  /* global define */
  if (typeof define === 'function' && define.amd) {
    //AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else {
    //Browser globals: jQuery
    factory(window.jQuery);
  }
}(function ($){
  //template, editor
  var tmpl = $.summernote.renderer.getTemplate();
  //add plugin
  $.summernote.addPlugin({
    name: 'genixcms', //name of plugin
    buttons: { //buttons
      readmore: function () {
        return tmpl.iconButton('fa fa-long-arrow-right', {
          event: 'readmore',
          title: 'Read more',
          hide: false
        });
      },
      elfinder: function () {
        return tmpl.iconButton('fa fa-list-alt', {
          event: 'elfinder',
          title: 'File Manager',
          hide: false
        });
      },
    },

    events: { //events
      readmore: function (event, editor, layoutInfo) {
        layoutInfo.holder().summernote("insertText", "[[--readmore--]]");
      },
      elfinder: function (event, editor, layoutInfo) {
        elfinderDialog();
      },

    }
  });
}));

Il y a deux bouton que j'ai fait pour mon cms. voir la elfinder bouton pour le gestionnaire de fichiers. Le elfinder événement exécuter le elfinderDialog() fonction et nous avons dû faire la fonction après.

ensuite, ajouter le bouton à summernote config.

$('.editor').summernote({
    height: 300,
    toolbar: [
            ['style', ['style']],
            ['style', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
            ['fontname', ['fontname']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']],
            ['height', ['height']],
            ['table', ['table']],
            ['insert', ['link', 'picture', 'video', 'hr', 'readmore']],
            ['genixcms', ['elfinder']],
            ['view', ['fullscreen', 'codeview']],
            ['help', ['help']]
        ],
    onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0],editor,welEditable);
        }
});

Voir cette balise ['genixcms', ['elfinder']], il affichera le bouton séparément des autres car il avait de sa propre division.
Il y est par défaut le téléchargement d'images à l'summernote bouton image. Et il est possible de télécharger sur le serveur. Je l'ai eu au travail et fonctionne bien. Le problème est, à certains moments, nous avons besoin de faire des modifications et nous avons besoin du gestionnaire de fichiers.

Ajouter le elFinder fonction javascript

Après tout summernote exigences est prêt pour le chargement sur le bouton. Nous avons besoin de créer la fonction qui sera exécutée lorsque le bouton a été cliqué. Voir le code ci-dessous.

function elfinderDialog(){
    var fm = $('<div/>').dialogelfinder({
        url : 'http://localhost/genixcms/inc/lib/Vendor/studio-42/elfinder/php/connector.minimal.php',
        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');
}

Pour insérer l'image est facile, il suffit de double-cliquer sur l'image et l'image sera insérée à l'éditeur.

J'espère que ce petit extrait peut aider toute personne qui a besoin de gestionnaire de fichier et que vous souhaitez utiliser elFinder comme le gestionnaire de fichiers.

grâce