diff --git a/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js b/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js index 6c0c1a3907..5373e9f325 100644 --- a/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js +++ b/wp-includes/js/tinymce/plugins/wordpress/editor_plugin.js @@ -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 t._handleMoreBreak(ed, url); }, diff --git a/wp-includes/js/tinymce/themes/advanced/image.htm b/wp-includes/js/tinymce/themes/advanced/image.htm index 19c00d7f0c..b55b35e10e 100644 --- a/wp-includes/js/tinymce/themes/advanced/image.htm +++ b/wp-includes/js/tinymce/themes/advanced/image.htm @@ -69,8 +69,11 @@ + + + + - diff --git a/wp-includes/js/tinymce/themes/advanced/js/image.js b/wp-includes/js/tinymce/themes/advanced/js/image.js index 56843c554f..aff8929ffc 100644 --- a/wp-includes/js/tinymce/themes/advanced/js/image.js +++ b/wp-includes/js/tinymce/themes/advanced/js/image.js @@ -29,6 +29,7 @@ var ImageDialog = { f.width.value = ed.dom.getAttrib(e, 'width'); f.height.value = ed.dom.getAttrib(e, 'height'); f.insert.value = ed.getLang('update'); + f.class_name.value = ed.dom.getAttrib(e, 'class'); this.styleVal = ed.dom.getAttrib(e, 'style'); selectByValue(f, 'image_list', f.src.value); selectByValue(f, 'align', this.getAttrib(e, 'align')); @@ -69,17 +70,15 @@ var ImageDialog = { align : getSelectValue(f, 'align') }); } else { - args = tinymce.extend(args, { - style : this.styleVal, - 'class' : f.class_name.value - }); + args.style = this.styleVal; } tinymce.extend(args, { src : f.src.value, alt : f.alt.value, width : f.width.value, - height : f.height.value + height : f.height.value, + 'class' : f.class_name.value }); el = ed.selection.getNode(); @@ -96,27 +95,31 @@ var ImageDialog = { }, 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) { st = tinyMCEPopup.dom.parseStyle(this.styleVal); // Handle 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 == 'left' || v == 'right') { st['float'] = v; delete st['vertical-align']; - f.class_name.value = (v == 'right') ? 'alignright' : 'alignleft'; + oldcls = cls ? ' '+cls : ''; + f.class_name.value = 'align' + v + oldcls; } else { st['vertical-align'] = v; delete st['float']; - f.class_name.value = null; + f.class_name.value = cls; } } else { delete st['float']; delete st['vertical-align']; - f.class_name.value = null; + f.class_name.value = cls; } // Handle border