From bcccc4cfceb580231a5e725c3f6838f163ffb82b Mon Sep 17 00:00:00 2001
From: baka <baka@8810af33-2d31-482b-a856-94f89814c4df>
Date: Wed, 7 Nov 2018 15:44:10 +0000
Subject: [PATCH] #3056 The editor now loads a CSS which sets some stylings for
 images. Also adds a button which reacts to the selection of an image.

git-svn-id: https://svn.libreccm.org/ccm/trunk@5728 8810af33-2d31-482b-a856-94f89814c4df
---
 ccm-core/web/assets/tinymce/editor.css        |  36 ++
 .../js/tinymce/plugins/image/plugin.min.js    |   2 +-
 .../js/tinymce/plugins/trunk-images/plugin.js | 305 ++++++++++++
 .../plugins/trunk-images/plugin.min.js        |   1 +
 trunk-images/config/webpack.config.prod.js    |  24 +-
 trunk-images/src/Dialog.ts                    | 450 +++++++++---------
 trunk-images/src/plugin.ts                    |  23 +-
 7 files changed, 593 insertions(+), 248 deletions(-)
 create mode 100644 ccm-core/web/assets/tinymce/editor.css
 create mode 100644 ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.js
 create mode 100644 ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.min.js

diff --git a/ccm-core/web/assets/tinymce/editor.css b/ccm-core/web/assets/tinymce/editor.css
new file mode 100644
index 000000000..9e769023d
--- /dev/null
+++ b/ccm-core/web/assets/tinymce/editor.css
@@ -0,0 +1,36 @@
+ul {
+    list-style: disc inside;
+}
+
+div.image {
+    border: 1px solid #999;
+
+    margin-bottom: 0.5em;
+}
+
+div.image span.caption {
+    display: block;
+}
+
+div.image.left {
+    float: left;
+
+    margin-right: 1em;
+}
+
+div.image.right {
+    float: right;
+
+    margin-left: 1em;
+}
+
+div.image.center {
+    text-align: center;
+}
+
+div.image.center span.caption {
+    margin-left: auto;
+    margin-right: auto;
+
+    text-align: left;
+}
\ No newline at end of file
diff --git a/ccm-core/web/assets/tinymce/js/tinymce/plugins/image/plugin.min.js b/ccm-core/web/assets/tinymce/js/tinymce/plugins/image/plugin.min.js
index eae3a15ae..4ab72c5e3 100644
--- a/ccm-core/web/assets/tinymce/js/tinymce/plugins/image/plugin.min.js
+++ b/ccm-core/web/assets/tinymce/js/tinymce/plugins/image/plugin.min.js
@@ -1 +1 @@
-!function(){"use strict";var e=tinymce.util.Tools.resolve("tinymce.PluginManager"),d=function(e){return!1!==e.settings.image_dimensions},a=function(e){return!0===e.settings.image_advtab},f=function(e){return e.getParam("image_prepend_url","")},n=function(e){return e.getParam("image_class_list")},r=function(e){return!1!==e.settings.image_description},i=function(e){return!0===e.settings.image_title},o=function(e){return!0===e.settings.image_caption},l=function(e){return e.getParam("image_list",!1)},u=function(e){return e.getParam("images_upload_url",!1)},c=function(e){return e.getParam("images_upload_handler",!1)},s=function(e){return e.getParam("images_upload_url")},g=function(e){return e.getParam("images_upload_handler")},m=function(e){return e.getParam("images_upload_base_path")},p=function(e){return e.getParam("images_upload_credentials")},h="undefined"!=typeof window?window:Function("return this;")(),v=function(e,t){for(var n=t!==undefined&&null!==t?t:h,r=0;r<e.length&&n!==undefined&&null!==n;++r)n=n[e[r]];return n},b=function(e,t){var n=e.split(".");return v(n,t)},t={getOrDie:function(e,t){var n=b(e,t);if(n===undefined||null===n)throw e+" not available on this browser";return n}};function y(){return new(t.getOrDie("FileReader"))}var x=tinymce.util.Tools.resolve("tinymce.util.Promise"),w=tinymce.util.Tools.resolve("tinymce.util.Tools"),S=tinymce.util.Tools.resolve("tinymce.util.XHR"),N=function(e,t){return Math.max(parseInt(e,10),parseInt(t,10))},C=function(e,n){var r=document.createElement("img");function t(e,t){r.parentNode&&r.parentNode.removeChild(r),n({width:e,height:t})}r.onload=function(){t(N(r.width,r.clientWidth),N(r.height,r.clientHeight))},r.onerror=function(){t(0,0)};var i=r.style;i.visibility="hidden",i.position="fixed",i.bottom=i.left="0px",i.width=i.height="auto",document.body.appendChild(r),r.src=e},A=function(e,i,t){return function n(e,r){return r=r||[],w.each(e,function(e){var t={text:e.text||e.title};e.menu?t.menu=n(e.menu):(t.value=e.value,i(t)),r.push(t)}),r}(e,t||[])},_=function(e){return e&&(e=e.replace(/px$/,"")),e},T=function(e){return 0<e.length&&/^[0-9]+$/.test(e)&&(e+="px"),e},O=function(e){if(e.margin){var t=e.margin.split(" ");switch(t.length){case 1:e["margin-top"]=e["margin-top"]||t[0],e["margin-right"]=e["margin-right"]||t[0],e["margin-bottom"]=e["margin-bottom"]||t[0],e["margin-left"]=e["margin-left"]||t[0];break;case 2:e["margin-top"]=e["margin-top"]||t[0],e["margin-right"]=e["margin-right"]||t[1],e["margin-bottom"]=e["margin-bottom"]||t[0],e["margin-left"]=e["margin-left"]||t[1];break;case 3:e["margin-top"]=e["margin-top"]||t[0],e["margin-right"]=e["margin-right"]||t[1],e["margin-bottom"]=e["margin-bottom"]||t[2],e["margin-left"]=e["margin-left"]||t[1];break;case 4:e["margin-top"]=e["margin-top"]||t[0],e["margin-right"]=e["margin-right"]||t[1],e["margin-bottom"]=e["margin-bottom"]||t[2],e["margin-left"]=e["margin-left"]||t[3]}delete e.margin}return e},R=function(e,t){var n=l(e);"string"==typeof n?S.send({url:n,success:function(e){t(JSON.parse(e))}}):"function"==typeof n?n(t):t(n)},P=function(e,t,n){function r(){n.onload=n.onerror=null,e.selection&&(e.selection.select(n),e.nodeChanged())}n.onload=function(){t.width||t.height||!d(e)||e.dom.setAttribs(n,{width:n.clientWidth,height:n.clientHeight}),r()},n.onerror=r},I=function(r){return new x(function(e,t){var n=new y;n.onload=function(){e(n.result)},n.onerror=function(){t(y.error.message)},n.readAsDataURL(r)})},L=tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),U=function(t){return function(e){return function(e){if(null===e)return"null";var t=typeof e;return"object"===t&&Array.prototype.isPrototypeOf(e)?"array":"object"===t&&String.prototype.isPrototypeOf(e)?"string":t}(e)===t}},E={isString:U("string"),isObject:U("object"),isArray:U("array"),isNull:U("null"),isBoolean:U("boolean"),isUndefined:U("undefined"),isFunction:U("function"),isNumber:U("number")},M=function(a){return function(){for(var e=new Array(arguments.length),t=0;t<e.length;t++)e[t]=arguments[t];if(0===e.length)throw new Error("Can't merge zero objects");for(var n={},r=0;r<e.length;r++){var i=e[r];for(var o in i)i.hasOwnProperty(o)&&(n[o]=a(n[o],i[o]))}return n}},j=M(function(e,t){return E.isObject(e)&&E.isObject(t)?j(e,t):t}),k=M(function(e,t){return t}),D={deepMerge:j,merge:k},z=L.DOM,B=function(e){return e.style.marginLeft&&e.style.marginRight&&e.style.marginLeft===e.style.marginRight?_(e.style.marginLeft):""},H=function(e){return e.style.marginTop&&e.style.marginBottom&&e.style.marginTop===e.style.marginBottom?_(e.style.marginTop):""},F=function(e){return e.style.borderWidth?_(e.style.borderWidth):""},W=function(e,t){return e.hasAttribute(t)?e.getAttribute(t):""},J=function(e,t){return e.style[t]?e.style[t]:""},V=function(e){return null!==e.parentNode&&"FIGURE"===e.parentNode.nodeName},G=function(e,t,n){e.setAttribute(t,n)},$=function(e){var t,n,r,i;V(e)?(i=(r=e).parentNode,z.insertAfter(r,i),z.remove(i)):(t=e,n=z.create("figure",{"class":"image"}),z.insertAfter(n,t),n.appendChild(t),n.appendChild(z.create("figcaption",{contentEditable:!0},"Caption")),n.contentEditable="false")},X=function(e,t){var n=e.getAttribute("style"),r=t(null!==n?n:"");0<r.length?(e.setAttribute("style",r),e.setAttribute("data-mce-style",r)):e.removeAttribute("style")},q=function(e,r){return function(e,t,n){e.style[t]?(e.style[t]=T(n),X(e,r)):G(e,t,n)}},K=function(e,t){return e.style[t]?_(e.style[t]):W(e,t)},Q=function(e,t){var n=T(t);e.style.marginLeft=n,e.style.marginRight=n},Y=function(e,t){var n=T(t);e.style.marginTop=n,e.style.marginBottom=n},Z=function(e,t){var n=T(t);e.style.borderWidth=n},ee=function(e,t){e.style.borderStyle=t},te=function(e){return"FIGURE"===e.nodeName},ne=function(e,t){var n=document.createElement("img");return G(n,"style",t.style),(B(n)||""!==t.hspace)&&Q(n,t.hspace),(H(n)||""!==t.vspace)&&Y(n,t.vspace),(F(n)||""!==t.border)&&Z(n,t.border),(J(n,"borderStyle")||""!==t.borderStyle)&&ee(n,t.borderStyle),e(n.getAttribute("style"))},re=function(e,t){return{src:W(t,"src"),alt:W(t,"alt"),title:W(t,"title"),width:K(t,"width"),height:K(t,"height"),"class":W(t,"class"),style:e(W(t,"style")),caption:V(t),hspace:B(t),vspace:H(t),border:F(t),borderStyle:J(t,"borderStyle")}},ie=function(e,t,n,r,i){n[r]!==t[r]&&i(e,r,n[r])},oe=function(r,i){return function(e,t,n){r(e,n),X(e,i)}},ae=function(e,t,n){var r=re(e,n);ie(n,r,t,"caption",function(e,t,n){return $(e)}),ie(n,r,t,"src",G),ie(n,r,t,"alt",G),ie(n,r,t,"title",G),ie(n,r,t,"width",q(0,e)),ie(n,r,t,"height",q(0,e)),ie(n,r,t,"class",G),ie(n,r,t,"style",oe(function(e,t){return G(e,"style",t)},e)),ie(n,r,t,"hspace",oe(Q,e)),ie(n,r,t,"vspace",oe(Y,e)),ie(n,r,t,"border",oe(Z,e)),ie(n,r,t,"borderStyle",oe(ee,e))},le=function(e,t){var n=e.dom.styles.parse(t),r=O(n),i=e.dom.styles.parse(e.dom.styles.serialize(r));return e.dom.styles.serialize(i)},ue=function(e){var t=e.selection.getNode(),n=e.dom.getParent(t,"figure.image");return n?e.dom.select("img",n)[0]:t&&("IMG"!==t.nodeName||t.getAttribute("data-mce-object")||t.getAttribute("data-mce-placeholder"))?null:t},ce=function(t,e){var n=t.dom,r=n.getParent(e.parentNode,function(e){return t.schema.getTextBlockElements()[e.nodeName]});return r?n.split(r,e):e},se=function(t){var e=ue(t);return e?re(function(e){return le(t,e)},e):{src:"",alt:"",title:"",width:"",height:"","class":"",style:"",caption:!1,hspace:"",vspace:"",border:"",borderStyle:""}},de=function(t,e){var n=function(e,t){var n=document.createElement("img");if(ae(e,D.merge(t,{caption:!1}),n),G(n,"alt",t.alt),t.caption){var r=z.create("figure",{"class":"image"});return r.appendChild(n),r.appendChild(z.create("figcaption",{contentEditable:!0},"Caption")),r.contentEditable="false",r}return n}(function(e){return le(t,e)},e);t.dom.setAttrib(n,"data-mce-id","__mcenew"),t.focus(),t.selection.setContent(n.outerHTML);var r=t.dom.select('*[data-mce-id="__mcenew"]')[0];if(t.dom.setAttrib(r,"data-mce-id",null),te(r)){var i=ce(t,r);t.selection.select(i)}else t.selection.select(r)},fe=function(e,t){var n=ue(e);n?t.src?function(t,e){var n,r=ue(t);if(ae(function(e){return le(t,e)},e,r),n=r,t.dom.setAttrib(n,"src",n.getAttribute("src")),te(r.parentNode)){var i=r.parentNode;ce(t,i),t.selection.select(r.parentNode)}else t.selection.select(r),P(t,e,r)}(e,t):function(e,t){if(t){var n=e.dom.is(t.parentNode,"figure.image")?t.parentNode:t;e.dom.remove(n),e.focus(),e.nodeChanged(),e.dom.isEmpty(e.getBody())&&(e.setContent(""),e.selection.setCursorLocation())}}(e,n):t.src&&de(e,t)},ge=function(n,r){r.find("#style").each(function(e){var t=ne(function(e){return le(n,e)},D.merge({src:"",alt:"",title:"",width:"",height:"","class":"",style:"",caption:!1,hspace:"",vspace:"",border:"",borderStyle:""},r.toJSON()));e.value(t)})},me=function(t){return{title:"Advanced",type:"form",pack:"start",items:[{label:"Style",name:"style",type:"textbox",onchange:(o=t,function(e){var t=o.dom,n=e.control.rootControl;if(a(o)){var r=n.toJSON(),i=t.parseStyle(r.style);n.find("#vspace").value(""),n.find("#hspace").value(""),((i=O(i))["margin-top"]&&i["margin-bottom"]||i["margin-right"]&&i["margin-left"])&&(i["margin-top"]===i["margin-bottom"]?n.find("#vspace").value(_(i["margin-top"])):n.find("#vspace").value(""),i["margin-right"]===i["margin-left"]?n.find("#hspace").value(_(i["margin-right"])):n.find("#hspace").value("")),i["border-width"]?n.find("#border").value(_(i["border-width"])):n.find("#border").value(""),i["border-style"]?n.find("#borderStyle").value(i["border-style"]):n.find("#borderStyle").value(""),n.find("#style").value(t.serializeStyle(t.parseStyle(t.serializeStyle(i))))}})},{type:"form",layout:"grid",packV:"start",columns:2,padding:0,defaults:{type:"textbox",maxWidth:50,onchange:function(e){ge(t,e.control.rootControl)}},items:[{label:"Vertical space",name:"vspace"},{label:"Border width",name:"border"},{label:"Horizontal space",name:"hspace"},{label:"Border style",type:"listbox",name:"borderStyle",width:90,maxWidth:90,onselect:function(e){ge(t,e.control.rootControl)},values:[{text:"Select...",value:""},{text:"Solid",value:"solid"},{text:"Dotted",value:"dotted"},{text:"Dashed",value:"dashed"},{text:"Double",value:"double"},{text:"Groove",value:"groove"},{text:"Ridge",value:"ridge"},{text:"Inset",value:"inset"},{text:"Outset",value:"outset"},{text:"None",value:"none"},{text:"Hidden",value:"hidden"}]}]}]};var o},pe=function(e,t){e.state.set("oldVal",e.value()),t.state.set("oldVal",t.value())},he=function(e,t){var n=e.find("#width")[0],r=e.find("#height")[0],i=e.find("#constrain")[0];n&&r&&i&&t(n,r,i.checked())},ve=function(e,t,n){var r=e.state.get("oldVal"),i=t.state.get("oldVal"),o=e.value(),a=t.value();n&&r&&i&&o&&a&&(o!==r?(a=Math.round(o/r*a),isNaN(a)||t.value(a)):(o=Math.round(a/i*o),isNaN(o)||e.value(o))),pe(e,t)},be=function(e){he(e,ve)},ye=function(){var e=function(e){be(e.control.rootControl)};return{type:"container",label:"Dimensions",layout:"flex",align:"center",spacing:5,items:[{name:"width",type:"textbox",maxLength:5,size:5,onchange:e,ariaLabel:"Width"},{type:"label",text:"x"},{name:"height",type:"textbox",maxLength:5,size:5,onchange:e,ariaLabel:"Height"},{name:"constrain",type:"checkbox",checked:!0,text:"Constrain proportions"}]}},xe=function(e){he(e,pe)},we=be,Se=function(e){e.meta=e.control.rootControl.toJSON()},Ne=function(s,e){var t=[{name:"src",type:"filepicker",filetype:"image",label:"Source",autofocus:!0,onchange:function(e){var t,n,r,i,o,a,l,u,c;n=s,a=(t=e).meta||{},l=t.control,u=l.rootControl,(c=u.find("#image-list")[0])&&c.value(n.convertURL(l.value(),"src")),w.each(a,function(e,t){u.find("#"+t).value(e)}),a.width||a.height||(r=n.convertURL(l.value(),"src"),i=f(n),o=new RegExp("^(?:[a-z]+:)?//","i"),i&&!o.test(r)&&r.substring(0,i.length)!==i&&(r=i+r),l.value(r),C(n.documentBaseURI.toAbsolute(l.value()),function(e){e.width&&e.height&&d(n)&&(u.find("#width").value(e.width),u.find("#height").value(e.height),xe(u))}))},onbeforecall:Se},e];return r(s)&&t.push({name:"alt",type:"textbox",label:"Image description"}),i(s)&&t.push({name:"title",type:"textbox",label:"Image Title"}),d(s)&&t.push(ye()),n(s)&&t.push({name:"class",type:"listbox",label:"Class",values:A(n(s),function(e){e.value&&(e.textStyle=function(){return s.formatter.getCssText({inline:"img",classes:[e.value]})})})}),o(s)&&t.push({name:"caption",type:"checkbox",label:"Caption"}),t},Ce=function(e,t){return{title:"General",type:"form",items:Ne(e,t)}},Ae=Ne,_e=function(){return t.getOrDie("URL")},Te=function(e){return _e().createObjectURL(e)},Oe=function(e){_e().revokeObjectURL(e)},Re=tinymce.util.Tools.resolve("tinymce.ui.Factory");function Pe(){return new(t.getOrDie("XMLHttpRequest"))}var Ie=function(){};function Le(a){var t=function(e,r,i,t){var o,n;(o=new Pe).open("POST",a.url),o.withCredentials=a.credentials,o.upload.onprogress=function(e){t(e.loaded/e.total*100)},o.onerror=function(){i("Image upload failed due to a XHR Transport error. Code: "+o.status)},o.onload=function(){var e,t,n;o.status<200||300<=o.status?i("HTTP Error: "+o.status):(e=JSON.parse(o.responseText))&&"string"==typeof e.location?r((t=a.basePath,n=e.location,t?t.replace(/\/$/,"")+"/"+n.replace(/^\//,""):n)):i("Invalid JSON: "+o.responseText)},(n=new FormData).append("file",e.blob(),e.filename()),o.send(n)};return a=w.extend({credentials:!1,handler:t},a),{upload:function(e){return a.url||a.handler!==t?(r=e,i=a.handler,new x(function(e,t){try{i(r,e,t,Ie)}catch(n){t(n.message)}})):x.reject("Upload url missing from the settings.");var r,i}}}var Ue=function(u){return function(e){var t=Re.get("Throbber"),n=e.control.rootControl,r=new t(n.getEl()),i=e.control.value(),o=Te(i),a=Le({url:s(u),basePath:m(u),credentials:p(u),handler:g(u)}),l=function(){r.hide(),Oe(o)};return r.show(),I(i).then(function(e){var t=u.editorUpload.blobCache.create({blob:i,blobUri:o,name:i.name?i.name.replace(/\.[^\.]+$/,""):null,base64:e.split(",")[1]});return a.upload(t).then(function(e){var t=n.find("#src");return t.value(e),n.find("tabpanel")[0].activateTab(0),t.fire("change"),l(),e})})["catch"](function(e){u.windowManager.alert(e),l()})}},Ee=".jpg,.jpeg,.png,.gif",Me=function(e){return{title:"Upload",type:"form",layout:"flex",direction:"column",align:"stretch",padding:"20 20 20 20",items:[{type:"container",layout:"flex",direction:"column",align:"center",spacing:10,items:[{text:"Browse for an image",type:"browsebutton",accept:Ee,onchange:Ue(e)},{text:"OR",type:"label"}]},{text:"Drop an image here",type:"dropzone",accept:Ee,height:100,onchange:Ue(e)}]}},je=function(e){return function(){return e}},ke=(je(!1),je(!0),function(o){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];for(var a=new Array(arguments.length-1),n=1;n<arguments.length;n++)a[n-1]=arguments[n];return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];var i=a.concat(n);return o.apply(null,i)}}),De=function(t,e){var n=e.control.getRoot();we(n),t.undoManager.transact(function(){var e=D.merge(se(t),n.toJSON());fe(t,e)}),t.editorUpload.uploadImagesAuto()};function ze(o){function e(e){var n,t,r=se(o);if(e&&(t={type:"listbox",label:"Image list",name:"image-list",values:A(e,function(e){e.value=o.convertURL(e.value||e.url,"src")},[{text:"None",value:""}]),value:r.src&&o.convertURL(r.src,"src"),onselect:function(e){var t=n.find("#alt");(!t.value()||e.lastControl&&t.value()===e.lastControl.text())&&t.value(e.control.text()),n.find("#src").value(e.control.value()).fire("change")},onPostRender:function(){t=this}}),a(o)||u(o)||c(o)){var i=[Ce(o,t)];a(o)&&i.push(me(o)),(u(o)||c(o))&&i.push(Me(o)),n=o.windowManager.open({title:"Insert/edit image",data:r,bodyType:"tabpanel",body:i,onSubmit:ke(De,o)})}else n=o.windowManager.open({title:"Insert/edit image",data:r,body:Ae(o,t),onSubmit:ke(De,o)});xe(n)}return{open:function(){R(o,e)}}}var Be=function(e){e.addCommand("mceImage",ze(e).open)},He=function(o){return function(e){for(var t,n,r=e.length,i=function(e){e.attr("contenteditable",o?"true":null)};r--;)t=e[r],(n=t.attr("class"))&&/\bimage\b/.test(n)&&(t.attr("contenteditable",o?"false":null),w.each(t.getAll("figcaption"),i))}},Fe=function(e){e.on("preInit",function(){e.parser.addNodeFilter("figure",He(!0)),e.serializer.addNodeFilter("figure",He(!1))})},We=function(e){e.addButton("image",{icon:"image",tooltip:"Insert/edit image",onclick:ze(e).open,stateSelector:"img:not([data-mce-object],[data-mce-placeholder]),figure.image"}),e.addMenuItem("image",{icon:"image",text:"Image",onclick:ze(e).open,context:"insert",prependToContext:!0})};e.add("image",function(e){Fe(e),We(e),Be(e)})}();
\ No newline at end of file
+!function(){"use strict";var e=tinymce.util.Tools.resolve("tinymce.PluginManager"),d=function(e){return!1!==e.settings.image_dimensions},i=function(e){return!0===e.settings.image_advtab},g=function(e){return e.getParam("image_prepend_url","")},n=function(e){return e.getParam("image_class_list")},r=function(e){return!1!==e.settings.image_description},a=function(e){return!0===e.settings.image_title},o=function(e){return!0===e.settings.image_caption},l=function(e){return e.getParam("image_list",!1)},u=function(e){return e.getParam("images_upload_url",!1)},c=function(e){return e.getParam("images_upload_handler",!1)},s=function(e){return e.getParam("images_upload_url")},m=function(e){return e.getParam("images_upload_handler")},f=function(e){return e.getParam("images_upload_base_path")},p=function(e){return e.getParam("images_upload_credentials")},h="undefined"!=typeof window?window:Function("return this;")(),v=function(e,t){return function(e,t){for(var n=t!==undefined&&null!==t?t:h,r=0;r<e.length&&n!==undefined&&null!==n;++r)n=n[e[r]];return n}(e.split("."),t)},t={getOrDie:function(e,t){var n=v(e,t);if(n===undefined||null===n)throw e+" not available on this browser";return n}};function b(){return new(t.getOrDie("FileReader"))}var y,x=tinymce.util.Tools.resolve("tinymce.util.Promise"),w=tinymce.util.Tools.resolve("tinymce.util.Tools"),C=tinymce.util.Tools.resolve("tinymce.util.XHR"),S=function(e,t){return Math.max(parseInt(e,10),parseInt(t,10))},N=function(e,n){var r=document.createElement("img");function t(e,t){r.parentNode&&r.parentNode.removeChild(r),n({width:e,height:t})}r.onload=function(){t(S(r.width,r.clientWidth),S(r.height,r.clientHeight))},r.onerror=function(){t(0,0)};var a=r.style;a.visibility="hidden",a.position="fixed",a.bottom=a.left="0px",a.width=a.height="auto",document.body.appendChild(r),r.src=e},_=function(e,a,t){return function n(e,r){return r=r||[],w.each(e,function(e){var t={text:e.text||e.title};e.menu?t.menu=n(e.menu):(t.value=e.value,a(t)),r.push(t)}),r}(e,t||[])},A=function(e){return e&&(e=e.replace(/px$/,"")),e},T=function(e){return 0<e.length&&/^[0-9]+$/.test(e)&&(e+="px"),e},R=function(e){if(e.margin){var t=e.margin.split(" ");switch(t.length){case 1:e["margin-top"]=e["margin-top"]||t[0],e["margin-right"]=e["margin-right"]||t[0],e["margin-bottom"]=e["margin-bottom"]||t[0],e["margin-left"]=e["margin-left"]||t[0];break;case 2:e["margin-top"]=e["margin-top"]||t[0],e["margin-right"]=e["margin-right"]||t[1],e["margin-bottom"]=e["margin-bottom"]||t[0],e["margin-left"]=e["margin-left"]||t[1];break;case 3:e["margin-top"]=e["margin-top"]||t[0],e["margin-right"]=e["margin-right"]||t[1],e["margin-bottom"]=e["margin-bottom"]||t[2],e["margin-left"]=e["margin-left"]||t[1];break;case 4:e["margin-top"]=e["margin-top"]||t[0],e["margin-right"]=e["margin-right"]||t[1],e["margin-bottom"]=e["margin-bottom"]||t[2],e["margin-left"]=e["margin-left"]||t[3]}delete e.margin}return e},I=function(e,t){var n=l(e);"string"==typeof n?C.send({url:n,success:function(e){t(JSON.parse(e))}}):"function"==typeof n?n(t):t(n)},O=function(e,t,n){function r(){n.onload=n.onerror=null,e.selection&&(e.selection.select(n),e.nodeChanged())}n.onload=function(){t.width||t.height||!d(e)||e.dom.setAttribs(n,{width:n.clientWidth,height:n.clientHeight}),r()},n.onerror=r},L=function(r){return new x(function(e,t){var n=new b;n.onload=function(){e(n.result)},n.onerror=function(){t(b.error.message)},n.readAsDataURL(r)})},P=tinymce.util.Tools.resolve("tinymce.dom.DOMUtils"),U=Object.prototype.hasOwnProperty,E=(y=function(e,t){return t},function(){for(var e=new Array(arguments.length),t=0;t<e.length;t++)e[t]=arguments[t];if(0===e.length)throw new Error("Can't merge zero objects");for(var n={},r=0;r<e.length;r++){var a=e[r];for(var o in a)U.call(a,o)&&(n[o]=y(n[o],a[o]))}return n}),k=P.DOM,M=function(e){return e.style.marginLeft&&e.style.marginRight&&e.style.marginLeft===e.style.marginRight?A(e.style.marginLeft):""},D=function(e){return e.style.marginTop&&e.style.marginBottom&&e.style.marginTop===e.style.marginBottom?A(e.style.marginTop):""},z=function(e){return e.style.borderWidth?A(e.style.borderWidth):""},B=function(e,t){return e.hasAttribute(t)?e.getAttribute(t):""},H=function(e,t){return e.style[t]?e.style[t]:""},j=function(e){return null!==e.parentNode&&"FIGURE"===e.parentNode.nodeName},F=function(e,t,n){e.setAttribute(t,n)},W=function(e){var t,n,r,a;j(e)?(a=(r=e).parentNode,k.insertAfter(r,a),k.remove(a)):(t=e,n=k.create("figure",{"class":"image"}),k.insertAfter(n,t),n.appendChild(t),n.appendChild(k.create("figcaption",{contentEditable:!0},"Caption")),n.contentEditable="false")},J=function(e,t){var n=e.getAttribute("style"),r=t(null!==n?n:"");0<r.length?(e.setAttribute("style",r),e.setAttribute("data-mce-style",r)):e.removeAttribute("style")},V=function(e,r){return function(e,t,n){e.style[t]?(e.style[t]=T(n),J(e,r)):F(e,t,n)}},G=function(e,t){return e.style[t]?A(e.style[t]):B(e,t)},$=function(e,t){var n=T(t);e.style.marginLeft=n,e.style.marginRight=n},X=function(e,t){var n=T(t);e.style.marginTop=n,e.style.marginBottom=n},q=function(e,t){var n=T(t);e.style.borderWidth=n},K=function(e,t){e.style.borderStyle=t},Q=function(e){return"FIGURE"===e.nodeName},Y=function(e,t){var n=document.createElement("img");return F(n,"style",t.style),(M(n)||""!==t.hspace)&&$(n,t.hspace),(D(n)||""!==t.vspace)&&X(n,t.vspace),(z(n)||""!==t.border)&&q(n,t.border),(H(n,"borderStyle")||""!==t.borderStyle)&&K(n,t.borderStyle),e(n.getAttribute("style"))},Z=function(e,t){return{src:B(t,"src"),alt:B(t,"alt"),title:B(t,"title"),width:G(t,"width"),height:G(t,"height"),"class":B(t,"class"),style:e(B(t,"style")),caption:j(t),hspace:M(t),vspace:D(t),border:z(t),borderStyle:H(t,"borderStyle")}},ee=function(e,t,n,r,a){n[r]!==t[r]&&a(e,r,n[r])},te=function(r,a){return function(e,t,n){r(e,n),J(e,a)}},ne=function(e,t,n){var r=Z(e,n);ee(n,r,t,"caption",function(e,t,n){return W(e)}),ee(n,r,t,"src",F),ee(n,r,t,"alt",F),ee(n,r,t,"title",F),ee(n,r,t,"width",V(0,e)),ee(n,r,t,"height",V(0,e)),ee(n,r,t,"class",F),ee(n,r,t,"style",te(function(e,t){return F(e,"style",t)},e)),ee(n,r,t,"hspace",te($,e)),ee(n,r,t,"vspace",te(X,e)),ee(n,r,t,"border",te(q,e)),ee(n,r,t,"borderStyle",te(K,e))},re=function(e,t){var n=e.dom.styles.parse(t),r=R(n),a=e.dom.styles.parse(e.dom.styles.serialize(r));return e.dom.styles.serialize(a)},ae=function(e){var t=e.selection.getNode(),n=e.dom.getParent(t,"figure.image");return n?e.dom.select("img",n)[0]:t&&("IMG"!==t.nodeName||t.getAttribute("data-mce-object")||t.getAttribute("data-mce-placeholder"))?null:t},oe=function(t,e){var n=t.dom,r=n.getParent(e.parentNode,function(e){return t.schema.getTextBlockElements()[e.nodeName]});return r?n.split(r,e):e},ie=function(t){var e=ae(t);return e?Z(function(e){return re(t,e)},e):{src:"",alt:"",title:"",width:"",height:"","class":"",style:"",caption:!1,hspace:"",vspace:"",border:"",borderStyle:""}},le=function(t,e){var n=function(e,t){var n=document.createElement("img");if(ne(e,E(t,{caption:!1}),n),F(n,"alt",t.alt),t.caption){var r=k.create("figure",{"class":"image"});return r.appendChild(n),r.appendChild(k.create("figcaption",{contentEditable:!0},"Caption")),r.contentEditable="false",r}return n}(function(e){return re(t,e)},e);t.dom.setAttrib(n,"data-mce-id","__mcenew"),t.focus(),t.selection.setContent(n.outerHTML);var r=t.dom.select('*[data-mce-id="__mcenew"]')[0];if(t.dom.setAttrib(r,"data-mce-id",null),Q(r)){var a=oe(t,r);t.selection.select(a)}else t.selection.select(r)},ue=function(e,t){var n=ae(e);n?t.src?function(t,e){var n,r=ae(t);if(ne(function(e){return re(t,e)},e,r),n=r,t.dom.setAttrib(n,"src",n.getAttribute("src")),Q(r.parentNode)){var a=r.parentNode;oe(t,a),t.selection.select(r.parentNode)}else t.selection.select(r),O(t,e,r)}(e,t):function(e,t){if(t){var n=e.dom.is(t.parentNode,"figure.image")?t.parentNode:t;e.dom.remove(n),e.focus(),e.nodeChanged(),e.dom.isEmpty(e.getBody())&&(e.setContent(""),e.selection.setCursorLocation())}}(e,n):t.src&&le(e,t)},ce=function(n,r){r.find("#style").each(function(e){var t=Y(function(e){return re(n,e)},E({src:"",alt:"",title:"",width:"",height:"","class":"",style:"",caption:!1,hspace:"",vspace:"",border:"",borderStyle:""},r.toJSON()));e.value(t)})},se=function(t){return{title:"Advanced",type:"form",pack:"start",items:[{label:"Style",name:"style",type:"textbox",onchange:(o=t,function(e){var t=o.dom,n=e.control.rootControl;if(i(o)){var r=n.toJSON(),a=t.parseStyle(r.style);n.find("#vspace").value(""),n.find("#hspace").value(""),((a=R(a))["margin-top"]&&a["margin-bottom"]||a["margin-right"]&&a["margin-left"])&&(a["margin-top"]===a["margin-bottom"]?n.find("#vspace").value(A(a["margin-top"])):n.find("#vspace").value(""),a["margin-right"]===a["margin-left"]?n.find("#hspace").value(A(a["margin-right"])):n.find("#hspace").value("")),a["border-width"]?n.find("#border").value(A(a["border-width"])):n.find("#border").value(""),a["border-style"]?n.find("#borderStyle").value(a["border-style"]):n.find("#borderStyle").value(""),n.find("#style").value(t.serializeStyle(t.parseStyle(t.serializeStyle(a))))}})},{type:"form",layout:"grid",packV:"start",columns:2,padding:0,defaults:{type:"textbox",maxWidth:50,onchange:function(e){ce(t,e.control.rootControl)}},items:[{label:"Vertical space",name:"vspace"},{label:"Border width",name:"border"},{label:"Horizontal space",name:"hspace"},{label:"Border style",type:"listbox",name:"borderStyle",width:90,maxWidth:90,onselect:function(e){ce(t,e.control.rootControl)},values:[{text:"Select...",value:""},{text:"Solid",value:"solid"},{text:"Dotted",value:"dotted"},{text:"Dashed",value:"dashed"},{text:"Double",value:"double"},{text:"Groove",value:"groove"},{text:"Ridge",value:"ridge"},{text:"Inset",value:"inset"},{text:"Outset",value:"outset"},{text:"None",value:"none"},{text:"Hidden",value:"hidden"}]}]}]};var o},de=function(e,t){e.state.set("oldVal",e.value()),t.state.set("oldVal",t.value())},ge=function(e,t){var n=e.find("#width")[0],r=e.find("#height")[0],a=e.find("#constrain")[0];n&&r&&a&&t(n,r,a.checked())},me=function(e,t,n){var r=e.state.get("oldVal"),a=t.state.get("oldVal"),o=e.value(),i=t.value();n&&r&&a&&o&&i&&(o!==r?(i=Math.round(o/r*i),isNaN(i)||t.value(i)):(o=Math.round(i/a*o),isNaN(o)||e.value(o))),de(e,t)},fe=function(e){ge(e,me)},pe=function(){var e=function(e){fe(e.control.rootControl)};return{type:"container",label:"Dimensions",layout:"flex",align:"center",spacing:5,items:[{name:"width",type:"textbox",maxLength:5,size:5,onchange:e,ariaLabel:"Width"},{type:"label",text:"x"},{name:"height",type:"textbox",maxLength:5,size:5,onchange:e,ariaLabel:"Height"},{name:"constrain",type:"checkbox",checked:!0,text:"Constrain proportions"}]}},he=function(e){ge(e,de)},ve=fe,be=function(e){e.meta=e.control.rootControl.toJSON()},ye=function(s,e){var t=[{name:"src",type:"filepicker",filetype:"image",label:"Source",autofocus:!0,onchange:function(e){var t,n,r,a,o,i,l,u,c;n=s,i=(t=e).meta||{},l=t.control,u=l.rootControl,(c=u.find("#image-list")[0])&&c.value(n.convertURL(l.value(),"src")),w.each(i,function(e,t){u.find("#"+t).value(e)}),i.width||i.height||(r=n.convertURL(l.value(),"src"),a=g(n),o=new RegExp("^(?:[a-z]+:)?//","i"),a&&!o.test(r)&&r.substring(0,a.length)!==a&&(r=a+r),l.value(r),N(n.documentBaseURI.toAbsolute(l.value()),function(e){e.width&&e.height&&d(n)&&(u.find("#width").value(e.width),u.find("#height").value(e.height),he(u))}))},onbeforecall:be},e];return r(s)&&t.push({name:"alt",type:"textbox",label:"Image description"}),a(s)&&t.push({name:"title",type:"textbox",label:"Image Title"}),d(s)&&t.push(pe()),n(s)&&t.push({name:"class",type:"listbox",label:"Class",values:_(n(s),function(e){e.value&&(e.textStyle=function(){return s.formatter.getCssText({inline:"img",classes:[e.value]})})})}),o(s)&&t.push({name:"caption",type:"checkbox",label:"Caption"}),t},xe=function(e,t){return{title:"General",type:"form",items:ye(e,t)}},we=ye,Ce=function(){return t.getOrDie("URL")},Se=function(e){return Ce().createObjectURL(e)},Ne=function(e){Ce().revokeObjectURL(e)},_e=tinymce.util.Tools.resolve("tinymce.ui.Factory");function Ae(){return new(t.getOrDie("XMLHttpRequest"))}var Te=function(){};function Re(i){var t=function(e,r,a,t){var o,n;(o=new Ae).open("POST",i.url),o.withCredentials=i.credentials,o.upload.onprogress=function(e){t(e.loaded/e.total*100)},o.onerror=function(){a("Image upload failed due to a XHR Transport error. Code: "+o.status)},o.onload=function(){var e,t,n;o.status<200||300<=o.status?a("HTTP Error: "+o.status):(e=JSON.parse(o.responseText))&&"string"==typeof e.location?r((t=i.basePath,n=e.location,t?t.replace(/\/$/,"")+"/"+n.replace(/^\//,""):n)):a("Invalid JSON: "+o.responseText)},(n=new FormData).append("file",e.blob(),e.filename()),o.send(n)};return i=w.extend({credentials:!1,handler:t},i),{upload:function(e){return i.url||i.handler!==t?(r=e,a=i.handler,new x(function(e,t){try{a(r,e,t,Te)}catch(n){t(n.message)}})):x.reject("Upload url missing from the settings.");var r,a}}}var Ie=function(u){return function(e){var t=_e.get("Throbber"),n=e.control.rootControl,r=new t(n.getEl()),a=e.control.value(),o=Se(a),i=Re({url:s(u),basePath:f(u),credentials:p(u),handler:m(u)}),l=function(){r.hide(),Ne(o)};return r.show(),L(a).then(function(e){var t=u.editorUpload.blobCache.create({blob:a,blobUri:o,name:a.name?a.name.replace(/\.[^\.]+$/,""):null,base64:e.split(",")[1]});return i.upload(t).then(function(e){var t=n.find("#src");return t.value(e),n.find("tabpanel")[0].activateTab(0),t.fire("change"),l(),e})})["catch"](function(e){u.windowManager.alert(e),l()})}},Oe=".jpg,.jpeg,.png,.gif",Le=function(e){return{title:"Upload",type:"form",layout:"flex",direction:"column",align:"stretch",padding:"20 20 20 20",items:[{type:"container",layout:"flex",direction:"column",align:"center",spacing:10,items:[{text:"Browse for an image",type:"browsebutton",accept:Oe,onchange:Ie(e)},{text:"OR",type:"label"}]},{text:"Drop an image here",type:"dropzone",accept:Oe,height:100,onchange:Ie(e)}]}},Pe=function(o){for(var e=[],t=1;t<arguments.length;t++)e[t-1]=arguments[t];for(var i=new Array(arguments.length-1),n=1;n<arguments.length;n++)i[n-1]=arguments[n];return function(){for(var e=[],t=0;t<arguments.length;t++)e[t]=arguments[t];for(var n=new Array(arguments.length),r=0;r<n.length;r++)n[r]=arguments[r];var a=i.concat(n);return o.apply(null,a)}},Ue=function(t,e){var n=e.control.getRoot();ve(n),t.undoManager.transact(function(){var e=E(ie(t),n.toJSON());ue(t,e)}),t.editorUpload.uploadImagesAuto()};function Ee(o){function e(e){var n,t,r=ie(o);if(e&&(t={type:"listbox",label:"Image list",name:"image-list",values:_(e,function(e){e.value=o.convertURL(e.value||e.url,"src")},[{text:"None",value:""}]),value:r.src&&o.convertURL(r.src,"src"),onselect:function(e){var t=n.find("#alt");(!t.value()||e.lastControl&&t.value()===e.lastControl.text())&&t.value(e.control.text()),n.find("#src").value(e.control.value()).fire("change")},onPostRender:function(){t=this}}),i(o)||u(o)||c(o)){var a=[xe(o,t)];i(o)&&a.push(se(o)),(u(o)||c(o))&&a.push(Le(o)),n=o.windowManager.open({title:"Insert/edit image",data:r,bodyType:"tabpanel",body:a,onSubmit:Pe(Ue,o)})}else n=o.windowManager.open({title:"Insert/edit image",data:r,body:we(o,t),onSubmit:Pe(Ue,o)});he(n)}return{open:function(){I(o,e)}}}var ke=function(e){e.addCommand("mceImage",Ee(e).open)},Me=function(o){return function(e){for(var t,n,r=e.length,a=function(e){e.attr("contenteditable",o?"true":null)};r--;)t=e[r],(n=t.attr("class"))&&/\bimage\b/.test(n)&&(t.attr("contenteditable",o?"false":null),w.each(t.getAll("figcaption"),a))}},De=function(e){e.on("preInit",function(){e.parser.addNodeFilter("figure",Me(!0)),e.serializer.addNodeFilter("figure",Me(!1))})},ze=function(e){e.addButton("image",{icon:"image",tooltip:"Insert/edit image",onclick:Ee(e).open,stateSelector:"img:not([data-mce-object],[data-mce-placeholder]),figure.image"}),e.addMenuItem("image",{icon:"image",text:"Image",onclick:Ee(e).open,context:"insert",prependToContext:!0})};e.add("image",function(e){De(e),ze(e),ke(e)})}();
\ No newline at end of file
diff --git a/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.js b/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.js
new file mode 100644
index 000000000..9852619d2
--- /dev/null
+++ b/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.js
@@ -0,0 +1,305 @@
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// identity function for calling harmony imports with the correct context
+/******/ 	__webpack_require__.i = function(value) { return value; };
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, {
+/******/ 				configurable: false,
+/******/ 				enumerable: true,
+/******/ 				get: getter
+/******/ 			});
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__webpack_require__.n = function(module) {
+/******/ 		var getter = module && module.__esModule ?
+/******/ 			function getDefault() { return module['default']; } :
+/******/ 			function getModuleExports() { return module; };
+/******/ 		__webpack_require__.d(getter, 'a', getter);
+/******/ 		return getter;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ })
+/************************************************************************/
+/******/ ([
+/* 0 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+exports.__esModule = true;
+var Dialog_1 = __webpack_require__(1);
+var plugin = function (editor, url) {
+    editor.addButton("trunk-images-button", {
+        icon: "image",
+        onlick: Dialog_1["default"](editor).open,
+        stateSelector: "div.image"
+    });
+    editor.addMenuItem("trunk-images", {
+        icon: "image",
+        text: "Insert Images",
+        onclick: Dialog_1["default"](editor).open,
+        stateSelector: "image",
+        context: "insert",
+        prependToContext: true
+    });
+};
+exports["default"] = plugin;
+
+
+/***/ }),
+/* 1 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+exports.__esModule = true;
+function default_1(editor) {
+    function open() {
+        var image_name = "";
+        var fileChooseContainer = new tinymce.ui.Container({
+            type: "container",
+            layout: "flex",
+            direction: "row",
+            align: "center",
+            padding: 5,
+            spacing: 15,
+            margin: 5
+        });
+        var imagePathTextBox = new tinymce.ui.TextBox({
+            name: "file",
+            label: "File:",
+            disabled: true
+        });
+        fileChooseContainer.add(imagePathTextBox);
+        var browseButton = new tinymce.ui.Button({
+            name: "browse_images",
+            text: "Browse Images",
+            onclick: function () {
+                var baseURL = window.location.href;
+                var offset = baseURL.lastIndexOf("/");
+                var destURL = baseURL.slice(0, offset + 1) + "image_select.jsp";
+                var selectWindow = window.open(destURL, "_blank", "scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no");
+                window.openCCM = new Object();
+                window.openCCM.imageSet = function (selectedImage) {
+                    imagePathTextBox.text(selectedImage.src);
+                    win
+                        .find("#file")
+                        .value(selectedImage.src)
+                        .fire("change");
+                    win
+                        .find("#width")
+                        .value(selectedImage.width)
+                        .fire("change");
+                    win
+                        .find("#height")
+                        .value(selectedImage.height)
+                        .fire("change");
+                    image_name = selectedImage.name;
+                    return true;
+                };
+            }
+        });
+        fileChooseContainer.add(browseButton);
+        var alternateTextBox = new tinymce.ui.TextBox({
+            name: "alternate",
+            label: "Alternate:"
+        });
+        var titleTextBox = new tinymce.ui.TextBox({
+            name: "title",
+            label: "Title:"
+        });
+        var alignmentContainer = new tinymce.ui.Container({
+            type: "container",
+            layout: "flex",
+            direction: "row"
+        });
+        var alginLabel = new tinymce.ui.Label({
+            text: "Alignment:"
+        });
+        var alignListBox = new tinymce.ui.ListBox({
+            name: "alignment",
+            values: [
+                { text: "Not set", value: "" },
+                { text: "Left", value: "left" },
+                { text: "Center", value: "center" },
+                { text: "Right", value: "right" }
+            ]
+        });
+        alignmentContainer.add(alginLabel);
+        alignmentContainer.add(alignListBox);
+        var fancyBoxContainer = new tinymce.ui.Container({
+            type: "container",
+            layout: "flex",
+            direction: "row"
+        });
+        var fancyBoxLabel = new tinymce.ui.Label({
+            text: "Fancy Box:"
+        });
+        var fancyBoxListBox = new tinymce.ui.ListBox({
+            name: "fancybox",
+            values: [
+                { text: "None", value: "" },
+                { text: "Zoom", value: "imageZoom" },
+                { text: "Gallery", value: "imageGallery" }
+            ]
+        });
+        fancyBoxContainer.add(fancyBoxLabel);
+        fancyBoxContainer.add(fancyBoxListBox);
+        var captionCheckBox = new tinymce.ui.Checkbox({
+            label: "Caption:",
+            name: "caption"
+        });
+        var dimensionContainer = new tinymce.ui.Container({
+            label: "Dimension",
+            layout: "flex",
+            direction: "row",
+            align: "center",
+            padding: 5,
+            spacing: 15,
+            margin: 5
+        });
+        var widthTextBox = new tinymce.ui.TextBox({
+            name: "width",
+            label: "Width"
+        });
+        var heightTextBox = new tinymce.ui.TextBox({
+            name: "height",
+            label: "Height"
+        });
+        dimensionContainer.add(widthTextBox);
+        dimensionContainer.add({ type: "label", text: "X" });
+        dimensionContainer.add(heightTextBox);
+        var win = editor.windowManager.open({
+            title: "Insert/Modify Image",
+            width: 800,
+            height: 600,
+            body: [
+                fileChooseContainer,
+                alternateTextBox,
+                titleTextBox,
+                alignmentContainer,
+                fancyBoxContainer,
+                captionCheckBox,
+                dimensionContainer
+            ],
+            onsubmit: function () {
+                var src = win.find("#file").value();
+                var alternate = win.find("#alternate").value();
+                var width = win.find("#width").value();
+                var height = win.find("#height").value();
+                var title = win.find("#title").value();
+                var alignment = win.find("#alignment").value();
+                var fancy_box = win.find("#fancybox").value();
+                if (src != null) {
+                    var img = "<img src=" +
+                        src +
+                        ' alt="' +
+                        alternate +
+                        '" name="' +
+                        image_name +
+                        '" width="' +
+                        width +
+                        'px"' +
+                        ' height="' +
+                        height +
+                        'px"' +
+                        " />";
+                    var fancy_box_wrap = "<a class=" +
+                        fancy_box +
+                        '" href="' +
+                        src +
+                        '" title="' +
+                        title +
+                        '" data-mce-href="' +
+                        src +
+                        '"> ' +
+                        img +
+                        "</a>";
+                    var span = "";
+                    if (win.find("#caption").value()) {
+                        span =
+                            '<span class="caption" style="width: ' +
+                                width +
+                                'px;" data-mce-style="width: ' +
+                                width +
+                                'px;">' +
+                                image_name +
+                                "</span>";
+                    }
+                    var img_div = '<div class="image ' +
+                        alignment +
+                        '">' +
+                        fancy_box_wrap +
+                        span +
+                        "</div>";
+                    editor.insertContent(img_div + "<br/>");
+                }
+            }
+        });
+    }
+    return {
+        open: open
+    };
+}
+exports["default"] = default_1;
+
+
+/***/ }),
+/* 2 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+exports.__esModule = true;
+var plugin_1 = __webpack_require__(0);
+tinymce.PluginManager.add("trunk-images", plugin_1["default"]);
+
+
+/***/ })
+/******/ ]);
\ No newline at end of file
diff --git a/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.min.js b/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.min.js
new file mode 100644
index 000000000..0c57978da
--- /dev/null
+++ b/ccm-core/web/assets/tinymce/js/tinymce/plugins/trunk-images/plugin.min.js
@@ -0,0 +1 @@
+!function(e){function t(i){if(n[i])return n[i].exports;var a=n[i]={i:i,l:!1,exports:{}};return e[i].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var n={};t.m=e,t.c=n,t.i=function(e){return e},t.d=function(e,n,i){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:i})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t,n){"use strict";t.__esModule=!0;var i=n(1),a=function(e,t){e.addButton("trunk-images-button",{icon:"image",onlick:i.default(e).open,stateSelector:"div.image"}),e.addMenuItem("trunk-images",{icon:"image",text:"Insert Images",onclick:i.default(e).open,stateSelector:"image",context:"insert",prependToContext:!0})};t.default=a},function(e,t,n){"use strict";function i(e){function t(){var t="",n=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),i=new tinymce.ui.TextBox({name:"file",label:"File:",disabled:!0});n.add(i);var a=new tinymce.ui.Button({name:"browse_images",text:"Browse Images",onclick:function(){var e=window.location.href,n=e.lastIndexOf("/"),a=e.slice(0,n+1)+"image_select.jsp";window.open(a,"_blank","scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no");window.openCCM=new Object,window.openCCM.imageSet=function(e){return i.text(e.src),p.find("#file").value(e.src).fire("change"),p.find("#width").value(e.width).fire("change"),p.find("#height").value(e.height).fire("change"),t=e.name,!0}}});n.add(a);var o=new tinymce.ui.TextBox({name:"alternate",label:"Alternate:"}),l=new tinymce.ui.TextBox({name:"title",label:"Title:"}),r=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),u=new tinymce.ui.Label({text:"Alignment:"}),c=new tinymce.ui.ListBox({name:"alignment",values:[{text:"Not set",value:""},{text:"Left",value:"left"},{text:"Center",value:"center"},{text:"Right",value:"right"}]});r.add(u),r.add(c);var d=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),s=new tinymce.ui.Label({text:"Fancy Box:"}),m=new tinymce.ui.ListBox({name:"fancybox",values:[{text:"None",value:""},{text:"Zoom",value:"imageZoom"},{text:"Gallery",value:"imageGallery"}]});d.add(s),d.add(m);var f=new tinymce.ui.Checkbox({label:"Caption:",name:"caption"}),g=new tinymce.ui.Container({label:"Dimension",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),x=new tinymce.ui.TextBox({name:"width",label:"Width"}),w=new tinymce.ui.TextBox({name:"height",label:"Height"});g.add(x),g.add({type:"label",text:"X"}),g.add(w);var p=e.windowManager.open({title:"Insert/Modify Image",width:800,height:600,body:[n,o,l,r,d,f,g],onsubmit:function(){var n=p.find("#file").value(),i=p.find("#alternate").value(),a=p.find("#width").value(),o=p.find("#height").value(),l=p.find("#title").value(),r=p.find("#alignment").value(),u=p.find("#fancybox").value();if(null!=n){var c="<img src="+n+' alt="'+i+'" name="'+t+'" width="'+a+'px" height="'+o+'px" />',d="<a class="+u+'" href="'+n+'" title="'+l+'" data-mce-href="'+n+'"> '+c+"</a>",s="";p.find("#caption").value()&&(s='<span class="caption" style="width: '+a+'px;" data-mce-style="width: '+a+'px;">'+t+"</span>");var m='<div class="image '+r+'">'+d+s+"</div>";e.insertContent(m+"<br/>")}}})}return{open:t}}t.__esModule=!0,t.default=i},function(e,t,n){"use strict";t.__esModule=!0;var i=n(0);tinymce.PluginManager.add("trunk-images",i.default)}]);
\ No newline at end of file
diff --git a/trunk-images/config/webpack.config.prod.js b/trunk-images/config/webpack.config.prod.js
index cf159f665..498de4d90 100644
--- a/trunk-images/config/webpack.config.prod.js
+++ b/trunk-images/config/webpack.config.prod.js
@@ -10,30 +10,26 @@ module.exports = {
     "plugin.min": "./src/index.ts"
   },
   output: {
-    path: path.join(__dirname, "../dist", pluginName),
+    path: path.join(__dirname, "../../runtime/apache-tomcat-8.5.15/webapps/ROOT/assets/tinymce/js/tinymce/plugins", pluginName),
     filename: "[name].js"
   },
   resolve: {
     extensions: [".webpack.js", ".web.js", ".ts", ".js"]
   },
   module: {
-    rules: [
-      {
-        test: /\.ts$/,
-        use: "ts-loader"
-      }
-    ]
+    rules: [{
+      test: /\.ts$/,
+      use: "ts-loader"
+    }]
   },
   plugins: [
     new webpack.optimize.UglifyJsPlugin({
       include: /\.min\.js$/,
       minimize: true
     }),
-    new CopyWebpackPlugin([
-      {
-        from: path.join(__dirname, "../src/LICENSE"),
-        to: path.join(__dirname, "../dist", pluginName)
-      }
-    ])
+    new CopyWebpackPlugin([{
+      from: path.join(__dirname, "../src/LICENSE"),
+      to: path.join(__dirname, "../dist", pluginName)
+    }])
   ]
-};
+};
\ No newline at end of file
diff --git a/trunk-images/src/Dialog.ts b/trunk-images/src/Dialog.ts
index c55b9dbdf..c89aaa0d9 100644
--- a/trunk-images/src/Dialog.ts
+++ b/trunk-images/src/Dialog.ts
@@ -1,232 +1,234 @@
 declare var tinymce: any;
 
-const open = function(editor) {
-  let image_name = "";
+export default function(editor) {
+  function open() {
+    let image_name = "";
 
-  // ================== File Chooser ====================
-  let fileChooseContainer = new tinymce.ui.Container({
-    type: "container",
-    layout: "flex",
-    direction: "row",
-    align: "center",
-    padding: 5,
-    spacing: 15,
-    margin: 5
-  });
+    // ================== File Chooser ====================
+    let fileChooseContainer = new tinymce.ui.Container({
+      type: "container",
+      layout: "flex",
+      direction: "row",
+      align: "center",
+      padding: 5,
+      spacing: 15,
+      margin: 5
+    });
 
-  let imagePathTextBox = new tinymce.ui.TextBox({
-    name: "file",
-    label: "File:",
-    disabled: true
-  });
+    let imagePathTextBox = new tinymce.ui.TextBox({
+      name: "file",
+      label: "File:",
+      disabled: true
+    });
 
-  fileChooseContainer.add(imagePathTextBox);
+    fileChooseContainer.add(imagePathTextBox);
 
-  let browseButton = new tinymce.ui.Button({
-    name: "browse_images",
-    text: "Browse Images",
-    onclick: function() {
-      let baseURL = window.location.href;
-      let offset = baseURL.lastIndexOf("/");
-      let destURL = baseURL.slice(0, offset + 1) + "image_select.jsp";
-      let selectWindow = window.open(
-        destURL,
-        "_blank",
-        "scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no"
-      );
-      (<any>window).openCCM = new Object();
-      (<any>window).openCCM.imageSet = selectedImage => {
-        imagePathTextBox.text(selectedImage.src);
-        win
-          .find("#file")
-          .value(selectedImage.src)
-          .fire("change");
-        win
-          .find("#width")
-          .value(selectedImage.width)
-          .fire("change");
-        win
-          .find("#height")
-          .value(selectedImage.height)
-          .fire("change");
-        image_name = selectedImage.name;
-        return true;
-      };
-    }
-  });
-  fileChooseContainer.add(browseButton);
-  // ================== File Chooser ====================
-
-  // ================== Alternate Text ==================
-  let alternateTextBox = new tinymce.ui.TextBox({
-    name: "alternate",
-    label: "Alternate:"
-  });
-  // ================== Alternate Text ==================
-
-  // ================== Title Text ======================
-  let titleTextBox = new tinymce.ui.TextBox({
-    name: "title",
-    label: "Title:"
-  });
-  // ================== Title Text ======================
-
-  // ================== Alignment =======================
-  let alignmentContainer = new tinymce.ui.Container({
-    type: "container",
-    layout: "flex",
-    direction: "row"
-  });
-
-  let alginLabel = new tinymce.ui.Label({
-    text: "Alignment:"
-  });
-
-  let alignListBox = new tinymce.ui.ListBox({
-    name: "alignment",
-    values: [
-      { text: "Not set", value: "" },
-      { text: "Left", value: "left" },
-      { text: "Center", value: "center" },
-      { text: "Right", value: "right" }
-    ]
-  });
-
-  alignmentContainer.add(alginLabel);
-  alignmentContainer.add(alignListBox);
-  // ================== Alignment =======================
-
-  // ================== Fancy Box =======================
-  let fancyBoxContainer = new tinymce.ui.Container({
-    type: "container",
-    layout: "flex",
-    direction: "row"
-  });
-
-  let fancyBoxLabel = new tinymce.ui.Label({
-    text: "Fancy Box:"
-  });
-
-  let fancyBoxListBox = new tinymce.ui.ListBox({
-    name: "fancybox",
-    values: [
-      { text: "None", value: "" },
-      { text: "Zoom", value: "imageZoom" },
-      { text: "Gallery", value: "imageGallery" }
-    ]
-  });
-
-  fancyBoxContainer.add(fancyBoxLabel);
-  fancyBoxContainer.add(fancyBoxListBox);
-  // ================== Fancy Box =======================
-
-  // ================== Caption =========================
-  let captionCheckBox = new tinymce.ui.Checkbox({
-    label: "Caption:",
-    name: "caption"
-  });
-  // ================== Caption =========================
-
-  // ================== Dimension Box ===================
-  let dimensionContainer = new tinymce.ui.Container({
-    label: "Dimension",
-    layout: "flex",
-    direction: "row",
-    align: "center",
-    padding: 5,
-    spacing: 15,
-    margin: 5
-  });
-
-  let widthTextBox = new tinymce.ui.TextBox({
-    name: "width",
-    label: "Width"
-  });
-
-  let heightTextBox = new tinymce.ui.TextBox({
-    name: "height",
-    label: "Height"
-  });
-
-  dimensionContainer.add(widthTextBox);
-  dimensionContainer.add({ type: "label", text: "X" });
-  dimensionContainer.add(heightTextBox);
-  // ================== Dimension Box ===================
-
-  const win = editor.windowManager.open({
-    title: "Insert/Modify Image",
-    width: 800,
-    height: 600,
-    body: [
-      fileChooseContainer,
-      alternateTextBox,
-      titleTextBox,
-      alignmentContainer,
-      fancyBoxContainer,
-      captionCheckBox,
-      dimensionContainer
-    ],
-    onsubmit: function() {
-      let src = win.find("#file").value();
-      let alternate = win.find("#alternate").value();
-      let width = win.find("#width").value();
-      let height = win.find("#height").value();
-      let title = win.find("#title").value();
-      let alignment = win.find("#alignment").value();
-      let fancy_box = win.find("#fancybox").value();
-
-      if (src != null) {
-        let img =
-          "<img src=" +
-          src +
-          ' alt="' +
-          alternate +
-          '" name="' +
-          image_name +
-          '" width="' +
-          width +
-          'px"' +
-          ' height="' +
-          height +
-          'px"' +
-          " />";
-
-        let fancy_box_wrap =
-          "<a class=" +
-          fancy_box +
-          '" href="' +
-          src +
-          '" title="' +
-          title +
-          '" data-mce-href="' +
-          src +
-          '"> ' +
-          img +
-          "</a>";
-        let span = "";
-        if (win.find("#caption").value()) {
-          span =
-            '<span class="caption" style="width: ' +
-            width +
-            'px;" data-mce-style="width: ' +
-            width +
-            'px;">' +
-            image_name +
-            "</span>";
-        }
-        let img_div =
-          '<div class="image ' +
-          alignment +
-          '">' +
-          fancy_box_wrap +
-          span +
-          "</div>";
-        editor.insertContent(img_div);
+    let browseButton = new tinymce.ui.Button({
+      name: "browse_images",
+      text: "Browse Images",
+      onclick: function() {
+        let baseURL = window.location.href;
+        let offset = baseURL.lastIndexOf("/");
+        let destURL = baseURL.slice(0, offset + 1) + "image_select.jsp";
+        let selectWindow = window.open(
+          destURL,
+          "_blank",
+          "scrollbars=yes,directories=no,toolbar=no,width=800,height=600,status=no,menubar=no"
+        );
+        (<any>window).openCCM = new Object();
+        (<any>window).openCCM.imageSet = selectedImage => {
+          imagePathTextBox.text(selectedImage.src);
+          win
+            .find("#file")
+            .value(selectedImage.src)
+            .fire("change");
+          win
+            .find("#width")
+            .value(selectedImage.width)
+            .fire("change");
+          win
+            .find("#height")
+            .value(selectedImage.height)
+            .fire("change");
+          image_name = selectedImage.name;
+          return true;
+        };
       }
-    }
-  });
-};
+    });
+    fileChooseContainer.add(browseButton);
+    // ================== File Chooser ====================
 
-export default {
-  open
-};
+    // ================== Alternate Text ==================
+    let alternateTextBox = new tinymce.ui.TextBox({
+      name: "alternate",
+      label: "Alternate:"
+    });
+    // ================== Alternate Text ==================
+
+    // ================== Title Text ======================
+    let titleTextBox = new tinymce.ui.TextBox({
+      name: "title",
+      label: "Title:"
+    });
+    // ================== Title Text ======================
+
+    // ================== Alignment =======================
+    let alignmentContainer = new tinymce.ui.Container({
+      type: "container",
+      layout: "flex",
+      direction: "row"
+    });
+
+    let alginLabel = new tinymce.ui.Label({
+      text: "Alignment:"
+    });
+
+    let alignListBox = new tinymce.ui.ListBox({
+      name: "alignment",
+      values: [
+        { text: "Not set", value: "" },
+        { text: "Left", value: "left" },
+        { text: "Center", value: "center" },
+        { text: "Right", value: "right" }
+      ]
+    });
+
+    alignmentContainer.add(alginLabel);
+    alignmentContainer.add(alignListBox);
+    // ================== Alignment =======================
+
+    // ================== Fancy Box =======================
+    let fancyBoxContainer = new tinymce.ui.Container({
+      type: "container",
+      layout: "flex",
+      direction: "row"
+    });
+
+    let fancyBoxLabel = new tinymce.ui.Label({
+      text: "Fancy Box:"
+    });
+
+    let fancyBoxListBox = new tinymce.ui.ListBox({
+      name: "fancybox",
+      values: [
+        { text: "None", value: "" },
+        { text: "Zoom", value: "imageZoom" },
+        { text: "Gallery", value: "imageGallery" }
+      ]
+    });
+
+    fancyBoxContainer.add(fancyBoxLabel);
+    fancyBoxContainer.add(fancyBoxListBox);
+    // ================== Fancy Box =======================
+
+    // ================== Caption =========================
+    let captionCheckBox = new tinymce.ui.Checkbox({
+      label: "Caption:",
+      name: "caption"
+    });
+    // ================== Caption =========================
+
+    // ================== Dimension Box ===================
+    let dimensionContainer = new tinymce.ui.Container({
+      label: "Dimension",
+      layout: "flex",
+      direction: "row",
+      align: "center",
+      padding: 5,
+      spacing: 15,
+      margin: 5
+    });
+
+    let widthTextBox = new tinymce.ui.TextBox({
+      name: "width",
+      label: "Width"
+    });
+
+    let heightTextBox = new tinymce.ui.TextBox({
+      name: "height",
+      label: "Height"
+    });
+
+    dimensionContainer.add(widthTextBox);
+    dimensionContainer.add({ type: "label", text: "X" });
+    dimensionContainer.add(heightTextBox);
+    // ================== Dimension Box ===================
+
+    const win = editor.windowManager.open({
+      title: "Insert/Modify Image",
+      width: 800,
+      height: 600,
+      body: [
+        fileChooseContainer,
+        alternateTextBox,
+        titleTextBox,
+        alignmentContainer,
+        fancyBoxContainer,
+        captionCheckBox,
+        dimensionContainer
+      ],
+      onsubmit: function() {
+        let src = win.find("#file").value();
+        let alternate = win.find("#alternate").value();
+        let width = win.find("#width").value();
+        let height = win.find("#height").value();
+        let title = win.find("#title").value();
+        let alignment = win.find("#alignment").value();
+        let fancy_box = win.find("#fancybox").value();
+
+        if (src != null) {
+          let img =
+            "<img src=" +
+            src +
+            ' alt="' +
+            alternate +
+            '" name="' +
+            image_name +
+            '" width="' +
+            width +
+            'px"' +
+            ' height="' +
+            height +
+            'px"' +
+            " />";
+
+          let fancy_box_wrap =
+            "<a class=" +
+            fancy_box +
+            '" href="' +
+            src +
+            '" title="' +
+            title +
+            '" data-mce-href="' +
+            src +
+            '"> ' +
+            img +
+            "</a>";
+          let span = "";
+          if (win.find("#caption").value()) {
+            span =
+              '<span class="caption" style="width: ' +
+              width +
+              'px;" data-mce-style="width: ' +
+              width +
+              'px;">' +
+              image_name +
+              "</span>";
+          }
+          let img_div =
+            '<div class="image ' +
+            alignment +
+            '">' +
+            fancy_box_wrap +
+            span +
+            "</div>";
+          editor.insertContent(img_div + "<br/>");
+        }
+      }
+    });
+  }
+
+  return {
+    open
+  };
+}
diff --git a/trunk-images/src/plugin.ts b/trunk-images/src/plugin.ts
index 8565d748b..82b0df6d6 100644
--- a/trunk-images/src/plugin.ts
+++ b/trunk-images/src/plugin.ts
@@ -1,15 +1,20 @@
 import Dialog from "./Dialog";
+declare var tinymce: any;
 
 const plugin = (editor: any, url: String) => {
-  console.log("Trunk-Images loaded");
-  editor.addMenuItem("trunk-images", {
-    icon: false,
-    text: "Insert Trunk-Images",
-    onclick: function() {
-      Dialog.open(editor);
-    },
-    context: "insert"
+  editor.addButton("trunk-images-button", {
+    icon: "image",
+    onlick: Dialog(editor).open,
+    stateSelector: "div.image"
+  });
+
+  editor.addMenuItem("trunk-images", {
+    icon: "image",
+    text: "Insert Images",
+    onclick: Dialog(editor).open,
+    stateSelector: "image",
+    context: "insert",
+    prependToContext: true
   });
-  return {};
 };
 export default plugin;