froala-editor/js/plugins/image_manager.min.js

The next generation Javascript WYSIWYG HTML rich text editor made by devs for devs. High performance and modern design make it easy to use for developers and loved by users.

/*!
 * froala_editor v5.0.1 (https://www.froala.com/wysiwyg-editor)
 * License https://froala.com/wysiwyg-editor/terms/
 * Copyright 2014-2026 Froala Labs
 */

!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?a(require("froala-editor")):"function"==typeof define&&define.amd?define(["froala-editor"],a):a(("undefined"!=typeof globalThis?globalThis:e||self).FroalaEditor)}(this,function(z){"use strict";if(Object.assign(z.DEFAULTS,{imageManagerLoadURL:"https://i.froala.com/load-files",imageManagerLoadMethod:"get",imageManagerLoadParams:{},imageManagerPreloader:null,imageManagerDeleteURL:"",imageManagerDeleteMethod:"post",imageManagerDeleteParams:{},imageManagerPageSize:12,imageManagerScrollOffset:20,imageManagerToggleTags:!0}),z.PLUGINS.imageManager=function(s){var i,g,t,r,o,l,d,m,c,f,n,u=s.$,p="image_manager",a=10,h=11,v=12,M=13,b=14,w=15,C=21,L=22,D={};function y(){var e=u(window).outerWidth();return e<768?2:e<1200?3:4}function I(){o.empty();for(var e=0;e<n;e++)o.append('<div class="fr-list-column"></div>')}function P(){if(c<d.length&&t[0].scrollTop>=t[0].scrollHeight-s.opts.imageManagerScrollOffset-t.outerHeight()){m++;for(var e=s.opts.imageManagerPageSize*(m-1);e<Math.min(d.length,s.opts.imageManagerPageSize*m);e++)!function(r){var i=new Image,o=u(document.createElement("div")).attr("class","fr-image-container fr-empty fr-image-"+f++).attr("data-loading",s.language.translate("Loading")+"..").attr("data-deleting",s.language.translate("Deleting")+"..");R(!1),i.onload=function(){o.height(Math.floor(o.width()/i.width*i.height));var e,t=u(document.createElement("img"));if(r.thumb)t.attr("src",r.thumb);else{if(O(b,r),!r.url)return O(w,r),!1;t.attr("src",r.url)}if(r.url&&t.attr("data-url",r.url),r.tag)if(g.find(".fr-modal-more.fr-not-available").removeClass("fr-not-available"),g.find(".fr-modal-tags").show(),0<=r.tag.indexOf(",")){for(var a=r.tag.split(","),n=0;n<a.length;n++)a[n]=a[n].trim(),0===l.find('a[title="'.concat(a[n],'"]')).length&&l.append('<a role="button" title="'.concat(a[n],'">').concat(a[n],"</a>"));t.attr("data-tag",a.join())}else 0===l.find('a[title="'.concat(r.tag.trim(),'"]')).length&&l.append('<a role="button" title="'.concat(r.tag.trim(),'">').concat(r.tag.trim(),"</a>")),t.attr("data-tag",r.tag.trim());for(e in r.name&&t.attr("alt",r.name),r)r.hasOwnProperty(e)&&"thumb"!==e&&"url"!==e&&"tag"!==e&&t.attr("data-".concat(e),r[e]);o.append(t).append(u(s.icon.create("imageManagerDelete")).addClass("fr-delete-img").attr("title",s.language.translate("Delete"))).append(u(s.icon.create("imageManagerInsert")).addClass("fr-insert-img").attr("title",s.language.translate("Insert"))),l.find(".fr-selected-tag").each(function(e,a){H(t,a.text)||o.hide()}),t.on("load",function(){o.removeClass("fr-empty"),o.height("auto"),c++,E(T(parseInt(t.parent().attr("class").match(/fr-image-(\d+)/)[1],10)+1)),R(!1),c%s.opts.imageManagerPageSize==0&&P()}),s.events.trigger("imageManager.imageLoaded",[t])},i.onerror=function(){c++,o.remove(),E(T(parseInt(o.attr("class").match(/fr-image-(\d+)/)[1],10)+1)),O(a,r),c%s.opts.imageManagerPageSize==0&&P()},i.src=r.thumb||r.url,S().append(o)}(d[e])}}function S(){var t,n;return o.find(".fr-list-column").each(function(e,a){a=u(a);(0===e||a.outerHeight()<n)&&(n=a.outerHeight(),t=a)}),t}function T(e){e===undefined&&(e=0);for(var a=[],t=f-1;e<=t;t--){var n=o.find(".fr-image-".concat(t));n.length&&(a.push(n),u(document.createElement("div")).attr("id","fr-image-hidden-container").append(n),o.find(".fr-image-".concat(t)).remove())}return a}function E(e){for(var a=e.length-1;0<=a;a--)S().append(e[a])}function R(e){var a;e===undefined&&(e=!0),i.isVisible()&&((a=y())!==n&&(n=a,a=T(),I(),E(a)),s.modals.resize(p),e)&&P()}function U(e){for(var a,t=e[0].attributes,n=t.length,r={};n--;)t[n]&&"src"!==(a=t[n].name)&&(r[a]=t[n].value);return r}function x(e){var a,t,e=u(e.currentTarget).siblings("img"),n=i.data("instance")||s,r=i.data("current-image");s.modals.hide(p),n.image.showProgressBar(),r?(r.data("fr-old-src",r.attr("src")),r.trigger("click")):(n.events.focus(!0),n.selection.restore(),a=(t=n.position.getBoundingRect()).left+t.width/2+u(s.doc).scrollLeft(),t=t.top+t.height+u(s.doc).scrollTop(),n.popups.setContainer("image.insert",s.$sc),n.popups.show("image.insert",a,t)),n.image.insert(e.data("url"),!1,U(e),r)}function q(e){var n=u(e.currentTarget).siblings("img"),e=s.language.translate("Are you sure? Image will be deleted.");confirm(e)&&(s.opts.imageManagerDeleteURL?!1!==s.events.trigger("imageManager.beforeDeleteImage",[n])&&(n.parent().addClass("fr-image-deleting"),u(this).ajax({method:s.opts.imageManagerDeleteMethod,url:s.opts.imageManagerDeleteURL,data:Object.assign(Object.assign({src:n.attr("src")},U(n)),s.opts.imageManagerDeleteParams),crossDomain:s.opts.requestWithCORS,withCredentials:s.opts.requestWithCredentials,headers:s.opts.requestHeaders,done:function(e,a,t){s.events.trigger("imageManager.imageDeleted",[e]);e=T(parseInt(n.parent().attr("class").match(/fr-image-(\d+)/)[1],10)+1);n.parent().remove(),E(e),i.find("#fr-modal-tags > a").each(function(){0===i.find('#fr-image-list [data-tag*="'.concat(u(this).text(),'"]')).length&&u(this).removeClass("fr-selected-tag").hide()}),_(),R(!0)},fail:function(e){O(C,e.response||e.responseText)}})):O(L))}function O(e,a){10<=e&&e<20?r.hide():20<=e&&e<30&&u(".fr-image-deleting").removeClass("fr-image-deleting"),s.events.trigger("imageManager.error",[{code:e,message:D[e]},a])}function k(){var e=g.find(".fr-modal-head-line").outerHeight(),a=l.outerHeight();g.toggleClass("fr-show-tags"),g.hasClass("fr-show-tags")?(g.css("height",e+a),t.css("marginTop",e+a),l.find("a").css("opacity",1)):(g.css("height",e),t.css("marginTop",e),l.find("a").css("opacity",0))}function _(){var e=l.find(".fr-selected-tag");0<e.length?(o.find("img").parents().show(),e.each(function(e,t){o.find("img").each(function(e,a){a=u(a);H(a,t.text)||a.parent().hide()})})):o.find("img").parents().show(),E(T()),P()}function j(e){e.preventDefault();e=u(e.currentTarget);e.toggleClass("fr-selected-tag"),s.opts.imageManagerToggleTags&&e.siblings("a").removeClass("fr-selected-tag"),_()}function H(e,a){for(var t=(e.attr("data-tag")||"").split(","),n=0;n<t.length;n++)if(t[n]===a)return 1}return D[a]="Image cannot be loaded from the passed link.",D[h]="Error during load images request.",D[v]="Missing imageManagerLoadURL option.",D[M]="Parsing load response failed.",D[b]="Missing image thumb.",D[w]="Missing image URL.",D[C]="Error during delete image request.",D[L]="Missing imageManagerDeleteURL option.",{require:["image"],_init:function(){if(!s.$wp&&"IMG"!==s.el.tagName)return!1},show:function(){var e,a;i||(a='<button class="fr-command fr-btn fr-modal-more fr-not-available" id="fr-modal-more-'.concat(s.sid,'"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24""><path d="').concat(z.SVG.tags,'"/></svg></button><h4 data-text="true">').concat(s.language.translate("Manage Images"),'</h4></div>\n      <div class="fr-modal-tags" id="fr-modal-tags">'),e=s.opts.imageManagerPreloader?'<img class="fr-preloader" id="fr-preloader" alt="'.concat(s.language.translate("Loading"),'.." src="').concat(s.opts.imageManagerPreloader,'" style="display: none;">'):'<span class="fr-preloader" id="fr-preloader" style="display: none;">'.concat(s.language.translate("Loading"),"</span>"),a=s.modals.create(p,a,e+='<div class="fr-image-list" id="fr-image-list"></div>'),i=a.$modal,g=a.$head,t=a.$body),i.data("current-image",s.image.get()),s.modals.show(p),r||(r=i.find("#fr-preloader"),o=i.find("#fr-image-list"),l=i.find("#fr-modal-tags"),n=y(),I(),g.css("height",g.find(".fr-modal-head-line").outerHeight()),s.events.$on(u(s.o_win),"resize",function(){R(!!d)}),s.events.bindClick(o,".fr-insert-img",x),s.events.bindClick(o,".fr-delete-img",q),s.helpers.isMobile()&&(s.events.bindClick(o,"div.fr-image-container",function(e){i.find(".fr-mobile-selected").removeClass("fr-mobile-selected"),u(e.currentTarget).addClass("fr-mobile-selected")}),i.on(s._mousedown,function(){i.find(".fr-mobile-selected").removeClass("fr-mobile-selected")})),i.on(s._mousedown+" "+s._mouseup,function(e){e.stopPropagation()}),i.on(s._mousedown,"*",function(){s.events.disableBlur()}),t.on("scroll",P),s.events.bindClick(i,"button#fr-modal-more-".concat(s.sid),k),s.events.bindClick(l,"a",j)),function(){r.show(),o.find(".fr-list-column").empty(),s.opts.imageManagerLoadURL?u(this).ajax({url:s.opts.imageManagerLoadURL,method:s.opts.imageManagerLoadMethod,data:s.opts.imageManagerLoadParams,crossDomain:s.opts.requestWithCORS,withCredentials:s.opts.requestWithCredentials,headers:s.opts.requestHeaders,done:function(e,a,t){s.events.trigger("imageManager.imagesLoaded",[e]);t=t.response;try{o.find(".fr-list-column").empty(),f=c=m=0,d=JSON.parse(e),P()}catch(n){O(M,t)}r.hide()},fail:function(e){O(h,e.response||e.responseText)}}):O(v)}()},hide:function(){s.modals.hide(p)}}},!z.PLUGINS.image)throw new Error("Image manager plugin requires image plugin.");z.DEFAULTS.imageInsertButtons.push("imageManager"),z.RegisterCommand("imageManager",{title:"Browse",undo:!1,focus:!1,modal:!0,callback:function(){this.imageManager.show()},plugin:"imageManager"}),z.DefineIcon("imageManager",{NAME:"folder",SVG_KEY:"imageManager"}),z.DefineIcon("imageManagerInsert",{NAME:"plus",SVG_KEY:"add"}),z.DefineIcon("imageManagerDelete",{NAME:"trash",SVG_KEY:"remove"})});