- Fix toolbar icons in IE9.
- Remove background gradients in IE < 10.
- Lint our plugins.
- Add draggable attribute to the caption wrapper and make the captioned images non-draggable in Chrome.
See #24067.

git-svn-id: https://develop.svn.wordpress.org/trunk@26880 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrew Ozz 2013-12-30 01:53:25 +00:00
parent 2f8c1ccffc
commit c37a101100
7 changed files with 122 additions and 96 deletions

View File

@ -2,12 +2,13 @@
TinyMCE and Quicklinks toolbars
------------------------------------------------------------------------------*/
.mce-panel {
div.mce-panel {
border: 0;
background: #fff;
filter: none;
}
.mce-toolbar-grp {
div.mce-toolbar-grp {
border-bottom: 1px solid #dedede;
background: #f5f5f5;
}
@ -40,6 +41,7 @@
margin: 0 1px;
-webkit-border-radius: 2px;
border-radius: 2px;
filter: none;
}
#wp-fullscreen-buttons .mce-btn:hover,
@ -107,37 +109,37 @@
color: #333;
}
.mce-i-bold,
.mce-i-italic,
.mce-i-bullist,
.mce-i-numlist,
.mce-i-blockquote,
.mce-i-alignleft,
.mce-i-aligncenter,
.mce-i-alignright,
.mce-i-link,
.mce-i-unlink,
.mce-i-wp_more,
.mce-i-strikethrough,
.mce-i-spellchecker,
.mce-i-fullscreen,
.mce-i-wp_fullscreen,
.mce-i-wp_adv,
.mce-i-underline,
.mce-i-alignjustify,
.mce-i-forecolor,
.mce-i-pastetext,
.mce-i-pasteword,
.mce-i-removeformat,
.mce-i-charmap,
.mce-i-outdent,
.mce-i-indent,
.mce-i-undo,
.mce-i-redo,
.mce-i-help,
.mce-i-wp_help,
.mce-i-wp-media-library,
.mce-i-ltr {
i.mce-i-bold,
i.mce-i-italic,
i.mce-i-bullist,
i.mce-i-numlist,
i.mce-i-blockquote,
i.mce-i-alignleft,
i.mce-i-aligncenter,
i.mce-i-alignright,
i.mce-i-link,
i.mce-i-unlink,
i.mce-i-wp_more,
i.mce-i-strikethrough,
i.mce-i-spellchecker,
i.mce-i-fullscreen,
i.mce-i-wp_fullscreen,
i.mce-i-wp_adv,
i.mce-i-underline,
i.mce-i-alignjustify,
i.mce-i-forecolor,
i.mce-i-pastetext,
i.mce-i-pasteword,
i.mce-i-removeformat,
i.mce-i-charmap,
i.mce-i-outdent,
i.mce-i-indent,
i.mce-i-undo,
i.mce-i-redo,
i.mce-i-help,
i.mce-i-wp_help,
i.mce-i-wp-media-library,
i.mce-i-ltr {
font: normal 20px/1 'dashicons';
padding: 0;
vertical-align: top;
@ -146,116 +148,117 @@
-moz-osx-font-smoothing: grayscale;
}
.mce-i-bold:before {
i.mce-i-bold:before {
content: '\f200';
}
.mce-i-italic:before {
i.mce-i-italic:before {
content: '\f201';
}
.mce-i-bullist:before {
i.mce-i-bullist:before {
content: '\f203';
}
.mce-i-numlist:before {
i.mce-i-numlist:before {
content: '\f204';
}
.mce-i-blockquote:before {
i.mce-i-blockquote:before {
content: '\f205';
}
.mce-i-alignleft:before {
i.mce-i-alignleft:before {
content: '\f206';
}
.mce-i-aligncenter:before {
i.mce-i-aligncenter:before {
content: '\f207';
}
.mce-i-alignright:before {
i.mce-i-alignright:before {
content: '\f208';
}
.mce-i-link:before {
i.mce-i-link:before {
content: '\f103';
}
.mce-i-unlink:before {
i.mce-i-unlink:before {
content: '\f225';
}
.mce-i-wp_more:before {
i.mce-i-wp_more:before {
content: '\f209';
}
.mce-i-strikethrough:before {
i.mce-i-strikethrough:before {
content: '\f224';
}
.mce-i-spellchecker:before {
i.mce-i-spellchecker:before {
content: '\f210';
}
.mce-i-fullscreen:before,
.mce-i-wp_fullscreen:before {
i.mce-i-fullscreen:before,
i.mce-i-wp_fullscreen:before {
content: '\f211';
}
.mce-i-wp_adv:before {
i.mce-i-wp_adv:before {
content: '\f212';
}
.mce-i-underline:before {
i.mce-i-underline:before {
content: '\f213';
}
.mce-i-alignjustify:before {
i.mce-i-alignjustify:before {
content: '\f214';
}
.mce-i-forecolor:before {
i.mce-i-forecolor:before {
content: '\f215';
}
.mce-i-pastetext:before {
i.mce-i-pastetext:before {
content: '\f217';
}
.mce-i-removeformat:before {
i.mce-i-removeformat:before {
content: '\f218';
}
.mce-i-charmap:before {
i.mce-i-charmap:before {
content: '\f220';
}
.mce-i-outdent:before {
i.mce-i-outdent:before {
content: '\f221';
}
.mce-i-indent:before {
i.mce-i-indent:before {
content: '\f222';
}
.mce-i-undo:before {
i.mce-i-undo:before {
content: '\f171';
}
.mce-i-redo:before {
i.mce-i-redo:before {
content: '\f172';
}
.mce-i-help:before,
.mce-i-wp_help:before {
i.mce-i-help:before,
i.mce-i-wp_help:before {
content: '\f223';
}
.mce-i-wp-media-library:before {
i.mce-i-wp-media-library:before {
content: '\f104';
}
.mce-i-ltr:before {
i.mce-i-ltr:before {
content: '\f320';
}
@ -299,8 +302,7 @@
box-shadow: none;
}
.quicktags-toolbar,
.wp_themeSkin tr.mceFirst td.mceToolbar {
.quicktags-toolbar {
border-bottom: 1px solid #dedede;
background: #f5f5f5;
}

View File

@ -4,10 +4,14 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
last = 0;
function toggleToolbars( state ) {
var iframe,
pixels = 0,
initial = state === 'hide',
toolbars = editor.theme.panel && editor.theme.panel.find('.toolbar');
var iframe, initial, toolbars,
pixels = 0;
initial = ( state === 'hide' );
if ( editor.theme.panel ) {
toolbars = editor.theme.panel.find('.toolbar');
}
if ( ! toolbars || toolbars.length < 2 || ( state === 'hide' && ! toolbars[1].visible() ) ) {
return;

View File

@ -49,6 +49,11 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
function getShortcode( content ) {
return content.replace( /<div (?:id="attachment_|class="mceTemp)[^>]*>([\s\S]+?)<\/div>/g, function( a, b ) {
if ( b.indexOf('<img ') === -1 ) {
// Broken caption. The user dragged the image out?
return '';
}
var ret = b.replace( /<dl ([^>]+)>\s*<dt [^>]+>([\s\S]+?)<\/dt>\s*<dd [^>]+>([\s\S]*?)<\/dd>\s*<\/dl>/gi, function( a, b, c, cap ) {
var id, cls, w;
@ -129,7 +134,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
captionId = '',
captionAlign = '',
captionWidth = '',
wrap, parent, html, P, imgId;
wrap, parent, node, html, imgId;
// Temp image id so we can find the node later
data.id = '__wp-temp-img-id';
@ -178,7 +183,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
}
if ( parent && parent.nodeName === 'P' ) {
wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
wrap = dom.create( 'div', { 'class': 'mceTemp', 'draggable': 'true' }, html );
dom.insertAfter( wrap, parent );
editor.selection.select( wrap );
editor.nodeChanged();
@ -187,7 +192,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
dom.remove( parent );
}
} else {
editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
editor.selection.setContent( '<div class="mceTemp" draggable="true">' + html + '</div>' );
}
} else {
editor.selection.setContent( html );
@ -244,7 +249,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
'<dt class="wp-caption-dt">'+ html +'</dt><dd class="wp-caption-dd">'+ caption +'</dd></dl>';
if ( parent = dom.getParent( imgNode, 'p' ) ) {
wrap = dom.create( 'div', { 'class': 'mceTemp' }, html );
wrap = dom.create( 'div', { 'class': 'mceTemp', 'draggable': 'true' }, html );
dom.insertAfter( wrap, parent );
editor.selection.select( wrap );
editor.nodeChanged();
@ -256,7 +261,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
dom.remove( parent );
}
} else {
editor.selection.setContent( '<div class="mceTemp">' + html + '</div>' );
editor.selection.setContent( '<div class="mceTemp" draggable="true">' + html + '</div>' );
}
}
} else {
@ -284,7 +289,7 @@ tinymce.PluginManager.add( 'wpeditimage', function( editor ) {
editor.on( 'wpLoadImageData', function( e ) {
var parent,
data = e.imgData.data
data = e.imgData.data,
imgNode = e.imgData.node;
if ( parent = dom.getParent( imgNode, 'dl.wp-caption' ) ) {

View File

@ -10,11 +10,10 @@ tinymce.PluginManager.add( 'wpfullscreen', function( editor ) {
var deltaSize, myHeight,
d = editor.getDoc(),
body = d.body,
de = d.documentElement,
DOM = tinymce.DOM
DOM = tinymce.DOM,
resizeHeight = 250;
if ( ( e && e.type == 'setcontent' && e.initial ) || editor.settings.inline ) {
if ( ( e && e.type === 'setcontent' && e.initial ) || editor.settings.inline ) {
return;
}

View File

@ -1,5 +1,5 @@
/* global tinymce */
tinymce.PluginManager.add('wpgallery', function( editor, url ) {
tinymce.PluginManager.add('wpgallery', function( editor ) {
function parseGallery( content ) {
return content.replace( /\[gallery([^\]]*)\]/g, function( match, attr ) {
@ -69,7 +69,7 @@ tinymce.PluginManager.add('wpgallery', function( editor, url ) {
});
*/
editor.on( 'mouseup', function( e ) {
if ( e.target.nodeName == 'IMG' && editor.dom.hasClass( e.target, 'wp-gallery' ) ) {
if ( e.target.nodeName === 'IMG' && editor.dom.hasClass( e.target, 'wp-gallery' ) ) {
// Don't trigger on right-click
if ( e.button !== 2 ) {
if ( editor.dom.hasClass( e.target, 'wp-gallery-selected' ) ) {

View File

@ -13,8 +13,9 @@
var wpView = this;
// Check if the `wp.mce` API exists.
if ( typeof wp === 'undefined' || ! wp.mce )
if ( typeof wp === 'undefined' || ! wp.mce ) {
return;
}
editor.on( 'PreInit', function() {
// Add elements so we can set `contenteditable` to false.
@ -26,8 +27,9 @@
// view wrappers. Since the editor's DOM is outdated at this point,
// we'll wait to render the views.
editor.on( 'BeforeSetContent', function( e ) {
if ( ! e.content )
if ( ! e.content ) {
return;
}
e.content = wp.mce.view.toViews( e.content );
});
@ -42,13 +44,14 @@
var selection = editor.selection;
// When a view is selected, ensure content that is being pasted
// or inserted is added to a text node (instead of the view).
editor.on( 'BeforeSetContent', function( e ) {
editor.on( 'BeforeSetContent', function() {
var walker, target,
view = wpView.getParentView( selection.getNode() );
// If the selection is not within a view, bail.
if ( ! view )
if ( ! view ) {
return;
}
// If there are no additional nodes or the next node is a
// view, create a text node after the current view.
@ -72,13 +75,15 @@
//
// Runs on paste and on inserting nodes/html.
editor.on( 'SetContent', function( e ) {
if ( ! e.context )
if ( ! e.context ) {
return;
}
var node = selection.getNode();
if ( ! node.innerHTML )
if ( ! node.innerHTML ) {
return;
}
node.innerHTML = wp.mce.view.toViews( node.innerHTML );
wp.mce.view.render( node );
@ -88,8 +93,9 @@
// When the editor's contents are being accessed as a string,
// transform any views back to their text representations.
editor.on( 'PostProcess', function( e ) {
if ( ( ! e.get && ! e.save ) || ! e.content )
if ( ( ! e.get && ! e.save ) || ! e.content ) {
return;
}
e.content = wp.mce.view.toText( e.content );
});
@ -97,7 +103,7 @@
// Triggers when the selection is changed.
// Add the event handler to the top of the stack.
editor.on( 'NodeChange', function( e ) {
var view = wpView.getParentView( node );
var view = wpView.getParentView( e.element );
// Update the selected view.
if ( view ) {
@ -117,12 +123,13 @@
view, instance;
// If a view isn't selected, let the event go on its merry way.
if ( ! selected )
if ( ! selected ) {
return;
}
// If the caret is not within the selected view, deselect the
// view and bail.
view = wpView.getParentView( selection.getNode() );
view = wpView.getParentView( editor.selection.getNode() );
if ( view !== selected ) {
wpView.deselect();
return;
@ -138,8 +145,9 @@
// Let keypresses that involve the command or control keys through.
// Also, let any of the F# keys through.
if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) )
if ( event.metaKey || event.ctrlKey || ( keyCode >= 112 && keyCode <= 123 ) ) {
return;
}
event.preventDefault();
});
@ -147,8 +155,9 @@
getParentView : function( node ) {
while ( node ) {
if ( this.isView( node ) )
if ( this.isView( node ) ) {
return node;
}
node = node.parentNode;
}
@ -159,8 +168,9 @@
},
select : function( view ) {
if ( view === selected )
if ( view === selected ) {
return;
}
this.deselect();
selected = view;
@ -168,8 +178,10 @@
},
deselect : function() {
if ( selected )
if ( selected ) {
wp.mce.view.deselect( selected );
}
selected = null;
}
});

View File

@ -50,8 +50,12 @@ dl.aligncenter {
border: 0 none;
}
.wp-caption img,
.wp-caption a {
div.mceTemp {
-ms-user-select: element;
}
dl.wp-caption,
dl.wp-caption * {
-webkit-user-drag: none;
}