#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

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 +
                         "</div>";
                     if (imageData != null) {
-                        editor.dom.replace(editor.dom.createFragment(img_div + "<br/>"), imageData.parent);
+                        editor.dom.replace(editor.dom.createFragment(img_div), imageData.parent);
                     }
                     else {
-                        editor.insertContent(img_div + "<br/>");
+                        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 {

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="<img src="+t+' alt="'+a+'" name="'+i+'" width="'+l+'px" height="'+r+'px" />',m="<a class="+u+'" href="'+t+'" title="'+o+'" data-mce-href="'+t+'"> '+d+"</a>",s="";p.find("#caption").value()&&(s='<span class="caption" style="width: '+l+'px;" data-mce-style="width: '+l+'px;">'+i+"</span>");var f='<div class="image '+c+'">'+m+s+"</div>";null!=n?e.dom.replace(e.dom.createFragment(f+"<br/>"),n.parent):e.insertContent(f+"<br/>")}}});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)}]);
+!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="<img src="+t+' alt="'+a+'" name="'+i+'" width="'+l+'px" height="'+o+'px" />',s="<a class="+d+'" href="'+t+'" title="'+c+'" data-mce-href="'+t+'"> '+u+"</a>",f="";x.find("#caption").value()&&(f='<span class="caption" style="width: '+l+'px;" data-mce-style="width: '+l+'px;">'+i+"</span>");var m='<div class="image '+r+'">'+s+f+"</div>";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)}]);

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 = {
+      let imageData = {
-	      file: img.getAttribute("src"),
+        file: img.getAttribute("src"),
-	      width: img.getAttribute("width").slice(0, -2),
+        width: img.getAttribute("width").slice(0, -2),
-	      height: img.getAttribute("height").slice(0, -2),
+        height: img.getAttribute("height").slice(0, -2),
-	      alt: img.getAttribute("alt"),
+        alt: img.getAttribute("alt"),
-	      parent: imgDiv
+        align: imgDiv.classList[1],
-	    };
+        fancy: imgDiv.childNodes[0].classList[0].slice(0, -1),
-	    return imageData;
+        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) {
             "</div>";
           if (imageData != null) {
             editor.dom.replace(
-              editor.dom.createFragment(img_div + "<br/>"),
+              editor.dom.createFragment(img_div),
               imageData.parent
             );
           } else {
-            editor.insertContent(img_div + "<br/>");
+            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 =============
   }

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",