How to add image manager Roxy Fileman in Summernote WYSIWYG editor?

Question

In my project I use Summernote editor but it doesn't have any image management plugin like TinyMCE or CKEditor.

My web application has a set of articles that users can edit. I would like to have a feature that allows the user to add images to the text area while editing an article in Summernote. However, these images need to be uploaded to the server. Roxy Fileman does this very well so I would like to integrate it.

Can anyone suggest how to implement this?

Since I can't use the standard image insertion dialog, I want to implement it through a separate button:

//My button
var RoxyButton = function (context) {
  var ui = $.summernote.ui;

  // create button
  var button = ui.button({
    contents: '<i class="fa fa-child"/>',
    tooltip: 'Insert image',
    click: RoxyFilemanDialog
  });

  return button.render(); // return button as jquery object
}

This is what the settings configuration for Summernote will look like:

toolbar: [
  ['mybutton', ['roxy']],
],
buttons: {
    roxy: RoxyButton
},

When I press my button, the dialog function should be triggered:

// Summernote
function RoxyFilemanDialog@(callback, value, type){    
    $.ajax({
        cache: false,
        type: "GET",
        url: "@Url.Action("CreateConfiguration", "RoxyFileman")",
        success: function (data, textStatus, jqXHR) {
            var roxyFileman = '@Url.Content("~/lib/Roxy_Fileman/index.html")'; 

//There should be a call to the function to open a dialog in Summernote...
{...
           
            $.ajax({
                title: 'Roxy Fileman',
                url: roxyFileman,
                width: 850,
                height: 650,
                plugins: "media",                
            });
}
            return false;
        },
        error: function (jqXHR, textStatus, errorThrown) {
            ...
        }
    });
}

But it seems that Summernote does not have an API for opening a custom dialog window and embedding your functions into it.

Or maybe I'm digging in the wrong direction and the implementation should be completely different?

Can anyone suggest how to implement this?

Answer 1

Below is how you can integrate Roxy Fireman with Summernote:

// Custom button definition
var RoxyButton = function (context) {
  var ui = $.summernote.ui;
  
  return ui.button({
    contents: '<i class="fa fa-image"/>',
    tooltip: 'Insert image',
    click: function () {
      openRoxyDialog(context);
    }
  }).render();
};

// Dialog handler
function openRoxyDialog(context) {
  // Create modal dialog
  var dialog = $('<div class="modal fade" role="dialog">');
  var content = `
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Select Image</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
          <iframe width="100%" height="500" frameborder="0"></iframe>
        </div>
      </div>
    </div>
  `;
  dialog.html(content);

  // Function to handle image selection
  window.ROXY_CALLBACK = function(file) {
    context.invoke('editor.insertImage', file);
    dialog.modal('hide');
  };

  // Load Roxy Fileman
  $.ajax({
    cache: false,
    type: "GET",
    url: "/RoxyFileman/CreateConfiguration",
    success: function (data) {
      var iframe = dialog.find('iframe');
      iframe.attr('src', '/lib/Roxy_Fileman/index.html');
      dialog.modal('show');
    },
    error: function (jqXHR, textStatus, errorThrown) {
      console.error('Failed to load Roxy configuration:', errorThrown);
    }
  });

  // Clean up on close
  dialog.on('hidden.bs.modal', function () {
    dialog.remove();
    window.ROXY_CALLBACK = null;
  });
}

// Summernote initialization
$('#summernote').summernote({
  toolbar: [
    ['mybutton', ['roxy']],
    // other toolbar options...
  ],
  buttons: {
    roxy: RoxyButton
  },
  height: 300
});

• The above code uses Bootstrap modal for the dialog

• Creates a callback function for Roxy to send selected files back

• Properly cleans up resources when dialog closes

• Maintains proper scoping of the Summernote context

Add this to your Roxy configuration to enable the callback:

function FileSelected(file) {
  if (window.ROXY_CALLBACK) {
    window.ROXY_CALLBACK(file);
  }
}

I hope this helps