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?