tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
FIX A couple of bugs integrating the SilverStripe media panel with TinyMCE
This commit is contained in:
Ingo Schommer 2013-01-31 15:24:51 +01:00
commit dc75d9a5b4
2 changed files with 68 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
javascript/HtmlEditorField.js
View File

@ -1057,44 +1057,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) {

15
thirdparty/tinymce_ssbuttons/editor_plugin_src.js vendored
View File

@ -38,7 +38,20 @@
ed.addCommand('ssmedia', function(ed) {
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');