auto-add css class when using align on Image. Props azaozz. fixes #5856
git-svn-id: https://develop.svn.wordpress.org/trunk@6844 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
68166b1851
commit
08be3a54a0
|
@ -72,6 +72,24 @@
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add class "alignleft" or "alignright" when selecting align for images.
|
||||||
|
ed.onBeforeExecCommand.add(function( editor, cmd ) {
|
||||||
|
var node, dir, xdir;
|
||||||
|
|
||||||
|
if ( ( cmd.indexOf('Justify') != -1 ) && ( node = editor.selection.getNode() ) ) {
|
||||||
|
if ( node.nodeName !== 'IMG' ) return;
|
||||||
|
dir = cmd.substring(7).toLowerCase();
|
||||||
|
if ( 'JustifyCenter' == cmd || editor.queryCommandState( cmd ) ) {
|
||||||
|
editor.dom.removeClass( node, "alignleft" );
|
||||||
|
editor.dom.removeClass( node, "alignright" );
|
||||||
|
} else {
|
||||||
|
xdir = ( dir == 'left' ) ? 'right' : 'left';
|
||||||
|
editor.dom.removeClass( node, "align"+xdir );
|
||||||
|
editor.dom.addClass( node, "align"+dir );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Add listeners to handle more break
|
// Add listeners to handle more break
|
||||||
t._handleMoreBreak(ed, url);
|
t._handleMoreBreak(ed, url);
|
||||||
},
|
},
|
||||||
|
|
|
@ -69,8 +69,11 @@
|
||||||
<td nowrap="nowrap"><label for="hspace">{#advanced_dlg.image_hspace}</label></td>
|
<td nowrap="nowrap"><label for="hspace">{#advanced_dlg.image_hspace}</label></td>
|
||||||
<td><input id="hspace" name="hspace" type="text" value="" size="3" maxlength="3" onchange="ImageDialog.updateStyle();" /></td>
|
<td><input id="hspace" name="hspace" type="text" value="" size="3" maxlength="3" onchange="ImageDialog.updateStyle();" /></td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td nowrap="nowrap"><label for="class_name">{#class_name}</label></td>
|
||||||
|
<td><input type="text" id="class_name" name="class_name" style="width: 140px" value="" /></td>
|
||||||
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
<input type="hidden" id="class_name" name="class_name" value="" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -29,6 +29,7 @@ var ImageDialog = {
|
||||||
f.width.value = ed.dom.getAttrib(e, 'width');
|
f.width.value = ed.dom.getAttrib(e, 'width');
|
||||||
f.height.value = ed.dom.getAttrib(e, 'height');
|
f.height.value = ed.dom.getAttrib(e, 'height');
|
||||||
f.insert.value = ed.getLang('update');
|
f.insert.value = ed.getLang('update');
|
||||||
|
f.class_name.value = ed.dom.getAttrib(e, 'class');
|
||||||
this.styleVal = ed.dom.getAttrib(e, 'style');
|
this.styleVal = ed.dom.getAttrib(e, 'style');
|
||||||
selectByValue(f, 'image_list', f.src.value);
|
selectByValue(f, 'image_list', f.src.value);
|
||||||
selectByValue(f, 'align', this.getAttrib(e, 'align'));
|
selectByValue(f, 'align', this.getAttrib(e, 'align'));
|
||||||
|
@ -69,17 +70,15 @@ var ImageDialog = {
|
||||||
align : getSelectValue(f, 'align')
|
align : getSelectValue(f, 'align')
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
args = tinymce.extend(args, {
|
args.style = this.styleVal;
|
||||||
style : this.styleVal,
|
|
||||||
'class' : f.class_name.value
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
tinymce.extend(args, {
|
tinymce.extend(args, {
|
||||||
src : f.src.value,
|
src : f.src.value,
|
||||||
alt : f.alt.value,
|
alt : f.alt.value,
|
||||||
width : f.width.value,
|
width : f.width.value,
|
||||||
height : f.height.value
|
height : f.height.value,
|
||||||
|
'class' : f.class_name.value
|
||||||
});
|
});
|
||||||
|
|
||||||
el = ed.selection.getNode();
|
el = ed.selection.getNode();
|
||||||
|
@ -96,27 +95,31 @@ var ImageDialog = {
|
||||||
},
|
},
|
||||||
|
|
||||||
updateStyle : function() {
|
updateStyle : function() {
|
||||||
var dom = tinyMCEPopup.dom, st, v, f = document.forms[0];
|
var dom = tinyMCEPopup.dom, st, v, cls, oldcls, rep, f = document.forms[0];
|
||||||
|
|
||||||
if (tinyMCEPopup.editor.settings.inline_styles) {
|
if (tinyMCEPopup.editor.settings.inline_styles) {
|
||||||
st = tinyMCEPopup.dom.parseStyle(this.styleVal);
|
st = tinyMCEPopup.dom.parseStyle(this.styleVal);
|
||||||
|
|
||||||
// Handle align
|
// Handle align
|
||||||
v = getSelectValue(f, 'align');
|
v = getSelectValue(f, 'align');
|
||||||
|
cls = f.class_name.value || '';
|
||||||
|
cls = cls ? cls.replace(/alignright\s*|alignleft\s*/g, '') : '';
|
||||||
|
cls = cls ? cls.replace(/^\s*(.+?)\s*$/, '$1') : '';
|
||||||
if (v) {
|
if (v) {
|
||||||
if (v == 'left' || v == 'right') {
|
if (v == 'left' || v == 'right') {
|
||||||
st['float'] = v;
|
st['float'] = v;
|
||||||
delete st['vertical-align'];
|
delete st['vertical-align'];
|
||||||
f.class_name.value = (v == 'right') ? 'alignright' : 'alignleft';
|
oldcls = cls ? ' '+cls : '';
|
||||||
|
f.class_name.value = 'align' + v + oldcls;
|
||||||
} else {
|
} else {
|
||||||
st['vertical-align'] = v;
|
st['vertical-align'] = v;
|
||||||
delete st['float'];
|
delete st['float'];
|
||||||
f.class_name.value = null;
|
f.class_name.value = cls;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
delete st['float'];
|
delete st['float'];
|
||||||
delete st['vertical-align'];
|
delete st['vertical-align'];
|
||||||
f.class_name.value = null;
|
f.class_name.value = cls;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle border
|
// Handle border
|
||||||
|
|
Loading…
Reference in New Issue