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() { 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. * Logic similar to TinyMCE 'advimage' plugin, insertAndClose() method.
*/ */
insertHTML: function(ed) { 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();
var attrs = this.getAttributes(), extraData = this.getExtraData();
node.attr(attrs); // Find the element we are replacing - either the img, it's wrapper parent, or nothing (if creating)
// TODO Doesn't allow adding a caption to image after it was first added var replacee = (node && node.is('img')) ? node : null;
if(captionNode.length) { if (replacee && replacee.parent().is('.captionImage')) replacee = replacee.parent();
captionNode.find('.caption').text(extraData.CaptionText);
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 {
// Otherwise insert the whole HTML content if (!caption.length) {
ed.repaint(); caption = $('<p class="caption"></p>').appendTo(container);
ed.insertContent(this.getHTML(), {skip_undo : 1}); }
ed.addUndo(); // Not sure why undo is separate here, replicating TinyMCE logic
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(); ed.repaint();
}, },
updateFromNode: function(node) { updateFromNode: function(node) {

15
thirdparty/tinymce_ssbuttons/editor_plugin_src.js vendored
View File

@ -38,7 +38,20 @@
ed.addCommand('ssmedia', function(ed) { ed.addCommand('ssmedia', function(ed) {
jQuery('#' + this.id).entwine('ss').openMediaDialog(); 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 // Disable link button when no link is selected
ed.onNodeChange.add(function(ed, cm, n, co) { ed.onNodeChange.add(function(ed, cm, n, co) {
cm.setDisabled('sslink', co && n.nodeName != 'A'); cm.setDisabled('sslink', co && n.nodeName != 'A');