Merge pull request #1149 from silverstripe-rebelalliance/bug/image_reedit_attr

FIX A couple of bugs integrating the SilverStripe media panel with TinyMCE

javascript/HtmlEditorField.js

@@ -1057,44 +1057,69 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
 				};
 			},
 			getHTML: function() {
-				var el,
+				/* NOP */
-					attrs = this.getAttributes(),
-					extraData = this.getExtraData(),
-					// imgEl = $('<img id="_ss_tmp_img" />');
-					imgEl = $('<img />').attr(attrs);
-					
-				if(extraData.CaptionText) {
-					el = $('<div style="width: ' + attrs['width'] + 'px;" class="captionImage ' + attrs['class'] + '"><p class="caption">' + extraData.CaptionText + '</p></div>').prepend(imgEl);
-				} else {
-					el = imgEl;
-				}
-				return $('<div />').append(el).html(); // Little hack to get outerHTML string
 			},
 			/**
 			 * Logic similar to TinyMCE 'advimage' plugin, insertAndClose() method.
 			 */
 			insertHTML: function(ed) {
-				var form = this.closest('form'),
+				var form = this.closest('form'), node = form.getSelection(), ed = form.getEditor();
-				node = form.getSelection(), captionNode = node.closest('.captionImage');
 
-				if(node && node.is('img')) {
+				// Get the attributes & extra data
-					// If the image exists, update it to avoid complications with inserting TinyMCE HTML content
 				var attrs = this.getAttributes(), extraData = this.getExtraData();
-					node.attr(attrs);
+
-					// TODO Doesn't allow adding a caption to image after it was first added
+				// Find the element we are replacing - either the img, it's wrapper parent, or nothing (if creating)
-					if(captionNode.length) {
+				var replacee = (node && node.is('img')) ? node : null;
-						captionNode.find('.caption').text(extraData.CaptionText);
+				if (replacee && replacee.parent().is('.captionImage')) replacee = replacee.parent();
-						captionNode.css({width: attrs.width, height: attrs.height}).attr('class', attrs['class']);
+
+				// Find the img node - either the existing img or a new one, and update it
+				var img = (node && node.is('img')) ? node : $('<img />');
+				img.attr(attrs);
+
+				// Any existing figure or caption node
+				var container = img.parent('.captionImage'), caption = container.find('.caption');
+
+				// If we've got caption text, we need a wrapping div.captionImage and sibling p.caption
+				if (extraData.CaptionText) {
+					if (!container.length) {
+						container = $('<div></div>');
 					}
-					// Undo needs to be added manually as we're doing direct DOM changes
+
-					ed.addUndo();
+					container.attr('class', 'captionImage '+attrs['class']);
-				} else {
+
+					if (!caption.length) {
+						caption = $('<p class="caption"></p>').appendTo(container);
+					}
+
+					caption.attr('class', 'caption '+attrs['class']).css('width', attrs.width).text(extraData.CaptionText);
+				}
+				// Otherwise forget they exist
+				else {
+					container = caption = null;
+				}
+
+				// The element we are replacing the replacee with
+				var replacer = container ? container : img;
+
+				// If we're replacing something, and it's not with itself, do so
+				if (replacee && replacee.not(replacer).length) {
+					replacee.replaceWith(replacer);
+				}
+
+				// If we have a wrapper element, make sure the img is the first child - img might be the
+				// replacee, and the wrapper the replacer, and we can't do this till after the replace has happened
+				if (container) {
+					container.prepend(img);
+				}
+
+				// If we don't have a replacee, then we need to insert the whole HTML
+				if (!replacee) {
 					// Otherwise insert the whole HTML content
 					ed.repaint();
-					ed.insertContent(this.getHTML(), {skip_undo : 1});	
+					ed.insertContent($('<div />').append(replacer).html(), {skip_undo : 1});
-					ed.addUndo(); // Not sure why undo is separate here, replicating TinyMCE logic
 				}
 
+				ed.addUndo();
 				ed.repaint();
 			},
 			updateFromNode: function(node) {

thirdparty/tinymce_ssbuttons/editor_plugin_src.js

@@ -39,6 +39,19 @@
 				jQuery('#' + this.id).entwine('ss').openMediaDialog();
 			});
 
+			// Replace the mceAdvLink and mceLink commands with the sslink command, and
+			// the mceAdvImage and mceImage commands with the ssmedia command
+			ed.onBeforeExecCommand.add(function(ed, cmd, ui, val, a){
+				if (cmd == 'mceAdvLink' || cmd == 'mceLink'){
+					ed.execCommand('sslink', ui, val, a);
+					a.terminate = true;
+				}
+				else if (cmd == 'mceAdvImage' || cmd == 'mceImage'){
+					ed.execCommand('ssmedia', ui, val, a);
+					a.terminate = true;
+				}
+			});
+
 			// Disable link button when no link is selected
 			ed.onNodeChange.add(function(ed, cm, n, co) {
 				cm.setDisabled('sslink', co && n.nodeName != 'A');