From a3a0d337b3a76bcc80697851bdf8b0c8ff0c897b Mon Sep 17 00:00:00 2001 From: baka Date: Wed, 12 Dec 2018 11:30:15 +0000 Subject: [PATCH] #3051 Editing of images should now fully work. Deletion of content still contains bugs, because the editor does not know that is should delete the whole DIV git-svn-id: https://svn.libreccm.org/ccm/trunk@5781 8810af33-2d31-482b-a856-94f89814c4df --- .../tinymce/plugins/ccm-cms-images/plugin.js | 29 +++++++++++- .../plugins/ccm-cms-images/plugin.min.js | 2 +- .../plugins/ccm-cms-images/src/Dialog.ts | 47 ++++++++++++++----- .../plugins/ccm-cms-images/src/plugin.ts | 2 +- 4 files changed, 65 insertions(+), 15 deletions(-) diff --git a/ccm-core/web/assets/tinymce/js/tinymce/plugins/ccm-cms-images/plugin.js b/ccm-core/web/assets/tinymce/js/tinymce/plugins/ccm-cms-images/plugin.js index 24bfe7620..e2afb6df3 100644 --- a/ccm-core/web/assets/tinymce/js/tinymce/plugins/ccm-cms-images/plugin.js +++ b/ccm-core/web/assets/tinymce/js/tinymce/plugins/ccm-cms-images/plugin.js @@ -111,8 +111,13 @@ function default_1(editor) { width: img.getAttribute("width").slice(0, -2), height: img.getAttribute("height").slice(0, -2), alt: img.getAttribute("alt"), + align: imgDiv.classList[1], + fancy: imgDiv.childNodes[0].classList[0].slice(0, -1), + title: imgDiv.childNodes[0].title, + caption: imgDiv.childNodes[1].localName == "span", parent: imgDiv }; + console.log(imageData); return imageData; } else { @@ -299,10 +304,10 @@ function default_1(editor) { span + ""; if (imageData != null) { - editor.dom.replace(editor.dom.createFragment(img_div + "
"), imageData.parent); + editor.dom.replace(editor.dom.createFragment(img_div), imageData.parent); } else { - editor.insertContent(img_div + "
"); + editor.insertContent(img_div); } } } @@ -324,6 +329,26 @@ function default_1(editor) { .find("#height") .value(imageData.height) .fire("change"); + if (imageData.align != undefined) { + win + .find("#alignment") + .value(imageData.align) + .fire("change"); + } + if (imageData.fancy != undefined) { + win + .find("#fancybox") + .value(imageData.fancy) + .fire("change"); + } + win + .find("#title") + .value(imageData.title) + .fire("change"); + win + .find("#caption") + .value(imageData.caption) + .fire("change"); } } return { diff --git a/ccm-core/web/assets/tinymce/js/tinymce/plugins/ccm-cms-images/plugin.min.js b/ccm-core/web/assets/tinymce/js/tinymce/plugins/ccm-cms-images/plugin.min.js index 487e53b1c..34a0037a9 100644 --- a/ccm-core/web/assets/tinymce/js/tinymce/plugins/ccm-cms-images/plugin.min.js +++ b/ccm-core/web/assets/tinymce/js/tinymce/plugins/ccm-cms-images/plugin.min.js @@ -1 +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("ccm-cms-images-button",{icon:"image",tooltip:"Insert/Edit image",onlick:i.default(e).open,stateSelector:"div.image"}),e.addMenuItem("ccm-cms-images-menu",{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(e){var t=e.selection.getNode(),n=e.dom.getParent(t,"div.image"),i=e.dom.select("img",n)[0];if(null!=n){return{file:i.getAttribute("src"),width:i.getAttribute("width").slice(0,-2),height:i.getAttribute("height").slice(0,-2),alt:i.getAttribute("alt"),parent:n}}return null}function n(){var n=t(e),i="",a=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),l=new tinymce.ui.TextBox({name:"file",label:"File:",disabled:!0});a.add(l);var r=new tinymce.ui.Button({name:"browse_images",text:"Browse Images",onclick:function(){var e=window.location.href,t=e.lastIndexOf("/"),n=e.slice(0,t+1)+"image_select.jsp";window.open(n,"_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 l.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"),i=e.name,!0}}});a.add(r);var o=new tinymce.ui.TextBox({name:"alternate",label:"Alternate:"}),c=new tinymce.ui.TextBox({name:"title",label:"Title:"}),u=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),d=new tinymce.ui.Label({text:"Alignment:"}),m=new tinymce.ui.ListBox({name:"alignment",values:[{text:"Not set",value:""},{text:"Left",value:"left"},{text:"Center",value:"center"},{text:"Right",value:"right"}]});u.add(d),u.add(m);var s=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),f=new tinymce.ui.Label({text:"Fancy Box:"}),g=new tinymce.ui.ListBox({name:"fancybox",values:[{text:"None",value:""},{text:"Zoom",value:"imageZoom"},{text:"Gallery",value:"imageGallery"}]});s.add(f),s.add(g);var h=new tinymce.ui.Checkbox({label:"Caption:",name:"caption"}),w=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"}),v=new tinymce.ui.TextBox({name:"height",label:"Height"});w.add(x),w.add({type:"label",text:"X"}),w.add(v);var p=e.windowManager.open({title:"Insert/Modify Image",width:800,height:600,body:[a,o,c,u,s,h,w],onsubmit:function(){var t=p.find("#file").value(),a=p.find("#alternate").value(),l=p.find("#width").value(),r=p.find("#height").value(),o=p.find("#title").value(),c=p.find("#alignment").value(),u=p.find("#fancybox").value();if(null!=t){var d="',m=" '+d+"",s="";p.find("#caption").value()&&(s=''+i+"");var f='
'+m+s+"
";null!=n?e.dom.replace(e.dom.createFragment(f+"
"),n.parent):e.insertContent(f+"
")}}});null!=n&&(p.find("#file").value(n.file).fire("change"),p.find("#alternate").value(n.alt).fire("change"),p.find("#width").value(n.width).fire("change"),p.find("#height").value(n.height).fire("change"))}return{open:n}}t.__esModule=!0,t.default=i},function(e,t,n){"use strict";t.__esModule=!0;var i=n(0);tinymce.PluginManager.add("ccm-cms-images",i.default)}]); \ No newline at end of file +!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("ccm-cms-images-button",{icon:"image",tooltip:"Insert/Edit image",onlick:i.default(e).open,stateSelector:"div.image"}),e.addMenuItem("ccm-cms-images-menu",{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(e){var t=e.selection.getNode(),n=e.dom.getParent(t,"div.image"),i=e.dom.select("img",n)[0];if(null!=n){var a={file:i.getAttribute("src"),width:i.getAttribute("width").slice(0,-2),height:i.getAttribute("height").slice(0,-2),alt:i.getAttribute("alt"),align:n.classList[1],fancy:n.childNodes[0].classList[0].slice(0,-1),title:n.childNodes[0].title,caption:"span"==n.childNodes[1].localName,parent:n};return console.log(a),a}return null}function n(){var n=t(e),i="",a=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),l=new tinymce.ui.TextBox({name:"file",label:"File:",disabled:!0});a.add(l);var o=new tinymce.ui.Button({name:"browse_images",text:"Browse Images",onclick:function(){var e=window.location.href,t=e.lastIndexOf("/"),n=e.slice(0,t+1)+"image_select.jsp";window.open(n,"_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 l.text(e.src),x.find("#file").value(e.src).fire("change"),x.find("#width").value(e.width).fire("change"),x.find("#height").value(e.height).fire("change"),i=e.name,!0}}});a.add(o);var c=new tinymce.ui.TextBox({name:"alternate",label:"Alternate:"}),r=new tinymce.ui.TextBox({name:"title",label:"Title:"}),d=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),u=new tinymce.ui.Label({text:"Alignment:"}),s=new tinymce.ui.ListBox({name:"alignment",values:[{text:"Not set",value:""},{text:"Left",value:"left"},{text:"Center",value:"center"},{text:"Right",value:"right"}]});d.add(u),d.add(s);var f=new tinymce.ui.Container({type:"container",layout:"flex",direction:"row"}),m=new tinymce.ui.Label({text:"Fancy Box:"}),g=new tinymce.ui.ListBox({name:"fancybox",values:[{text:"None",value:""},{text:"Zoom",value:"imageZoom"},{text:"Gallery",value:"imageGallery"}]});f.add(m),f.add(g);var h=new tinymce.ui.Checkbox({label:"Caption:",name:"caption"}),v=new tinymce.ui.Container({label:"Dimension",layout:"flex",direction:"row",align:"center",padding:5,spacing:15,margin:5}),p=new tinymce.ui.TextBox({name:"width",label:"Width"}),w=new tinymce.ui.TextBox({name:"height",label:"Height"});v.add(p),v.add({type:"label",text:"X"}),v.add(w);var x=e.windowManager.open({title:"Insert/Modify Image",width:800,height:600,body:[a,c,r,d,f,h,v],onsubmit:function(){var t=x.find("#file").value(),a=x.find("#alternate").value(),l=x.find("#width").value(),o=x.find("#height").value(),c=x.find("#title").value(),r=x.find("#alignment").value(),d=x.find("#fancybox").value();if(null!=t){var u="',s=" '+u+"",f="";x.find("#caption").value()&&(f=''+i+"");var m='
'+s+f+"
";null!=n?e.dom.replace(e.dom.createFragment(m),n.parent):e.insertContent(m)}}});null!=n&&(x.find("#file").value(n.file).fire("change"),x.find("#alternate").value(n.alt).fire("change"),x.find("#width").value(n.width).fire("change"),x.find("#height").value(n.height).fire("change"),void 0!=n.align&&x.find("#alignment").value(n.align).fire("change"),void 0!=n.fancy&&x.find("#fancybox").value(n.fancy).fire("change"),x.find("#title").value(n.title).fire("change"),x.find("#caption").value(n.caption).fire("change"))}return{open:n}}t.__esModule=!0,t.default=i},function(e,t,n){"use strict";t.__esModule=!0;var i=n(0);tinymce.PluginManager.add("ccm-cms-images",i.default)}]); \ No newline at end of file diff --git a/tools-ng/tinymce/plugins/ccm-cms-images/src/Dialog.ts b/tools-ng/tinymce/plugins/ccm-cms-images/src/Dialog.ts index 2ee03ca30..fecb708f5 100644 --- a/tools-ng/tinymce/plugins/ccm-cms-images/src/Dialog.ts +++ b/tools-ng/tinymce/plugins/ccm-cms-images/src/Dialog.ts @@ -6,16 +6,21 @@ export default function(editor) { const imgDiv = editor.dom.getParent(elem, "div.image"); const img = editor.dom.select("img", imgDiv)[0]; if (imgDiv != null) { - let imageData = { - file: img.getAttribute("src"), - width: img.getAttribute("width").slice(0, -2), - height: img.getAttribute("height").slice(0, -2), - alt: img.getAttribute("alt"), - parent: imgDiv - }; - return imageData; + let imageData = { + file: img.getAttribute("src"), + width: img.getAttribute("width").slice(0, -2), + height: img.getAttribute("height").slice(0, -2), + alt: img.getAttribute("alt"), + align: imgDiv.classList[1], + fancy: imgDiv.childNodes[0].classList[0].slice(0, -1), + title: imgDiv.childNodes[0].title, + caption: imgDiv.childNodes[1].localName == "span", + parent: imgDiv + }; + console.log(imageData); + return imageData; } else { - return null; + return null; } } @@ -243,11 +248,11 @@ export default function(editor) { ""; if (imageData != null) { editor.dom.replace( - editor.dom.createFragment(img_div + "
"), + editor.dom.createFragment(img_div), imageData.parent ); } else { - editor.insertContent(img_div + "
"); + editor.insertContent(img_div); } } } @@ -270,6 +275,26 @@ export default function(editor) { .find("#height") .value(imageData.height) .fire("change"); + if (imageData.align != undefined) { + win + .find("#alignment") + .value(imageData.align) + .fire("change"); + } + if (imageData.fancy != undefined) { + win + .find("#fancybox") + .value(imageData.fancy) + .fire("change"); + } + win + .find("#title") + .value(imageData.title) + .fire("change"); + win + .find("#caption") + .value(imageData.caption) + .fire("change"); } // ================== Fill with selection ============= } diff --git a/tools-ng/tinymce/plugins/ccm-cms-images/src/plugin.ts b/tools-ng/tinymce/plugins/ccm-cms-images/src/plugin.ts index acad3bd19..43b29d929 100644 --- a/tools-ng/tinymce/plugins/ccm-cms-images/src/plugin.ts +++ b/tools-ng/tinymce/plugins/ccm-cms-images/src/plugin.ts @@ -11,7 +11,7 @@ const plugin = (editor: any, url: String) => { editor.addMenuItem("ccm-cms-images-menu", { icon: "image", - text: "Insert Images", + text: "Insert/Edit Images", onclick: Dialog(editor).open, stateSelector: "image", context: "insert",