tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-06-24 13:39:26 +02:00
Code Issues Projects Releases Wiki Activity

FIX Not being able to remove, add or edit the caption on an image properly

Browse Source
This commit is contained in:
Hamish Friedlander 2013-01-31 16:35:48 +13:00
parent 9f822d1e3c
commit 6f937745b0
1 changed files with 54 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
javascript/HtmlEditorField.js
View File

@ -1047,44 +1047,69 @@ ss.editorWrappers['default'] = ss.editorWrappers.tinyMCE;
};
},
getHTML: function() {
var el,
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
/* NOP */
},
/**
* Logic similar to TinyMCE 'advimage' plugin, insertAndClose() method.
*/
insertHTML: function(ed) {
var form = this.closest('form'),
node = form.getSelection(), captionNode = node.closest('.captionImage');
var form = this.closest('form'), node = form.getSelection(), ed = form.getEditor();
if(node && node.is('img')) {
// 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
if(captionNode.length) {
captionNode.find('.caption').text(extraData.CaptionText);
captionNode.css({width: attrs.width, height: attrs.height}).attr('class', attrs['class']);
// Get the attributes & extra data
var attrs = this.getAttributes(), extraData = this.getExtraData();
// Find the element we are replacing - either the img, it's wrapper parent, or nothing (if creating)
var replacee = (node && node.is('img')) ? node : null;
if (replacee && replacee.parent().is('.captionImage')) replacee = replacee.parent();
// 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();
} else {
// Otherwise insert the whole HTML content
ed.repaint();
ed.insertContent(this.getHTML(), {skip_undo : 1});
ed.addUndo(); // Not sure why undo is separate here, replicating TinyMCE logic
container.attr('class', 'captionImage '+attrs['class']);
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($('<div />').append(replacer).html(), {skip_undo : 1});
}
ed.addUndo();
ed.repaint();
},
updateFromNode: function(node) {