CARVIEW |
Select Language
HTTP/2 200
date: Wed, 23 Jul 2025 19:11:08 GMT
content-type: text/html; charset=utf-8
vary: X-PJAX, X-PJAX-Container, Turbo-Visit, Turbo-Frame, X-Requested-With,Accept-Encoding, Accept, X-Requested-With
x-robots-tag: none
etag: W/"522f9e6ab663d359ff1f5bbe91f42a84"
cache-control: max-age=0, private, must-revalidate
strict-transport-security: max-age=31536000; includeSubdomains; preload
x-frame-options: deny
x-content-type-options: nosniff
x-xss-protection: 0
referrer-policy: no-referrer-when-downgrade
content-security-policy: default-src 'none'; base-uri 'self'; child-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/; connect-src 'self' uploads.github.com www.githubstatus.com collector.github.com raw.githubusercontent.com api.github.com github-cloud.s3.amazonaws.com github-production-repository-file-5c1aeb.s3.amazonaws.com github-production-upload-manifest-file-7fdce7.s3.amazonaws.com github-production-user-asset-6210df.s3.amazonaws.com *.rel.tunnels.api.visualstudio.com wss://*.rel.tunnels.api.visualstudio.com objects-origin.githubusercontent.com copilot-proxy.githubusercontent.com proxy.individual.githubcopilot.com proxy.business.githubcopilot.com proxy.enterprise.githubcopilot.com *.actions.githubusercontent.com wss://*.actions.githubusercontent.com productionresultssa0.blob.core.windows.net/ productionresultssa1.blob.core.windows.net/ productionresultssa2.blob.core.windows.net/ productionresultssa3.blob.core.windows.net/ productionresultssa4.blob.core.windows.net/ productionresultssa5.blob.core.windows.net/ productionresultssa6.blob.core.windows.net/ productionresultssa7.blob.core.windows.net/ productionresultssa8.blob.core.windows.net/ productionresultssa9.blob.core.windows.net/ productionresultssa10.blob.core.windows.net/ productionresultssa11.blob.core.windows.net/ productionresultssa12.blob.core.windows.net/ productionresultssa13.blob.core.windows.net/ productionresultssa14.blob.core.windows.net/ productionresultssa15.blob.core.windows.net/ productionresultssa16.blob.core.windows.net/ productionresultssa17.blob.core.windows.net/ productionresultssa18.blob.core.windows.net/ productionresultssa19.blob.core.windows.net/ github-production-repository-image-32fea6.s3.amazonaws.com github-production-release-asset-2e65be.s3.amazonaws.com insights.github.com wss://alive.github.com api.githubcopilot.com api.individual.githubcopilot.com api.business.githubcopilot.com api.enterprise.githubcopilot.com; font-src github.githubassets.com; form-action 'self' github.com gist.github.com copilot-workspace.githubnext.com objects-origin.githubusercontent.com; frame-ancestors 'none'; frame-src viewscreen.githubusercontent.com notebooks.githubusercontent.com; img-src 'self' data: blob: github.githubassets.com media.githubusercontent.com camo.githubusercontent.com identicons.github.com avatars.githubusercontent.com private-avatars.githubusercontent.com github-cloud.s3.amazonaws.com objects.githubusercontent.com release-assets.githubusercontent.com secured-user-images.githubusercontent.com/ user-images.githubusercontent.com/ private-user-images.githubusercontent.com opengraph.githubassets.com copilotprodattachments.blob.core.windows.net/github-production-copilot-attachments/ github-production-user-asset-6210df.s3.amazonaws.com customer-stories-feed.github.com spotlights-feed.github.com objects-origin.githubusercontent.com *.githubusercontent.com; manifest-src 'self'; media-src github.com user-images.githubusercontent.com/ secured-user-images.githubusercontent.com/ private-user-images.githubusercontent.com github-production-user-asset-6210df.s3.amazonaws.com gist.github.com; script-src github.githubassets.com; style-src 'unsafe-inline' github.githubassets.com; upgrade-insecure-requests; worker-src github.githubassets.com github.com/assets-cdn/worker/ github.com/assets/ gist.github.com/assets-cdn/worker/
server: github.com
content-encoding: gzip
accept-ranges: bytes
set-cookie: _gh_sess=LtTeGrTg5lg3%2FtnimrBLcoV2WNGwQCL7OaYUAOI1qjwxPDcttuqXz6k73wnNnJjG0FH5SaDHwQBpPQ3jY1HFCY39we4I7QWYv7Tsd%2B7y0NwDSXu7GtnUbX6efH3K61XqrPaj%2F0Q2ISPam3Vgj5g9eWJD0rmSvvFMDFUEAcS6aDJbn1eTPWOCqFEUAowjNQtVBvWbjy%2F4BGrQUpDk7msygBhk57ZgxFbdeoZHX4kuFX3nn7kJ22eD%2FEZaddB97YHlQ%2BkL0Z8L9c2JEAxnSRp1dA%3D%3D--2F%2B6%2BmuZnm1MqbrK--Z0J7YzVrQUbKDz8RHNHjEA%3D%3D; Path=/; HttpOnly; Secure; SameSite=Lax
set-cookie: _octo=GH1.1.1771259975.1753297868; Path=/; Domain=github.com; Expires=Thu, 23 Jul 2026 19:11:08 GMT; Secure; SameSite=Lax
set-cookie: logged_in=no; Path=/; Domain=github.com; Expires=Thu, 23 Jul 2026 19:11:08 GMT; HttpOnly; Secure; SameSite=Lax
x-github-request-id: BA80:271430:1022861:131CDBB:688133CC
Integration with Multiple Summernote (fixed functions) · Studio-42/elFinder Wiki · GitHub
Skip to content
Navigation Menu
{{ message }}
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Integration with Multiple Summernote (fixed functions)
Silas Ribas Martins edited this page Nov 20, 2019
·
3 revisions
You can use this integration on Multiple language systems.
Tested with »
- Bootstrap v3.3.6
- jQuery v2.2.4
- jQuery UI - v1.11.4
- elFinder Version 2.0.9 and elFinder Version 2.1.29
Create Button function (summernote-ext-elfinder.js)
(function (factory) {
/* global define */
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else if (typeof module === 'object' && module.exports) {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(window.jQuery);
}
}(function ($) {
// Extends plugins for adding readmore.
// - plugin is external module for customizing.
$.extend($.summernote.plugins, {
/**
* @param {Object} context - context object has status of editor.
*/
'readmore': function (context) {
var self = this;
// ui has renders to build ui elements.
// - you can create a button with `ui.button`
var ui = $.summernote.ui;
// add readmore button
context.memo('button.readmore', function () {
// create button
var button = ui.button({
contents: '<i class="fa fa-long-arrow-right"/> Read-More',
tooltip: 'readmore',
click: function () {
context.invoke('editor.insertText', '[[--readmore--]]');
}
});
// create jQuery object from button instance.
var $readmore = button.render();
return $readmore;
});
// This methods will be called when editor is destroyed by $('..').summernote('destroy');
// You should remove elements on `initialize`.
this.destroy = function () {
this.$panel.remove();
this.$panel = null;
};
},
'elfinder': function (context) {
var self = this;
// ui has renders to build ui elements.
// - you can create a button with `ui.button`
var ui = $.summernote.ui;
// add elfinder button
context.memo('button.elfinder', function () {
// create button
var button = ui.button({
contents: '<i class="fa fa-list-alt"/> Add Picture',
tooltip: 'elfinder',
click: function () {
elfinderDialog(context);
}
});
// create jQuery object from button instance.
var $elfinder = button.render();
return $elfinder;
});
// This methods will be called when editor is destroyed by $('..').summernote('destroy');
// You should remove elements on `initialize`.
this.destroy = function () {
this.$panel.remove();
this.$panel = null;
};
}
});
}));
elfinder function
<script>
function elfinderDialog(context){ // <------------------ +context
var fm = $('<div/>').dialogelfinder({
url : 'https://localhost/path/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>
Summernote Toolbar
['insert', ['link', 'image','elfinder','hr']]
Thanks @semplon Regards; DeSwa (https://www.ientegre.com & Integration Systems)
If you desire to use barryvdh/laravel-elfinder integration to open in popup
Load css and js files of ColorBox:
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/example1/colorbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.colorbox/1.4.33/jquery.colorbox-min.js"></script>
Load extension:
<script src="summernote-ext-elfinder.js"></script>
Define popup url variable using laravel route() function and new elfinder function:
var ELFINDER_POPUP_URL = '{{ route('elfinder.popup', ['input_id' => '__INPUT_ID__']) }}';
elfinder function and processSelectedFile function
<script>
function elfinderDialog(context) {
// trigger the reveal modal with elfinder inside
// context.$note[0].id is the field id
var triggerUrl = ELFINDER_POPUP_URL.replace('__INPUT_ID__', context.$note[0].id);
$.colorbox({
href: triggerUrl,
fastIframe: true,
iframe: true,
width: '70%',
height: '70%'
});
}
// function to update the file selected by elfinder
function processSelectedFile(filePath, requestingField) {
$('#' + requestingField).summernote('editor.insertImage', filePath);
}
</script>
You can’t perform that action at this time.