wpLink: replace the "Title" field with a "Text" field and populate it with the link text when editing an existing link or with the selected text if any.
Props iseulde. See #28206. git-svn-id: https://develop.svn.wordpress.org/trunk@31713 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
62c89ae8b5
commit
bfbcfe3e6a
|
@ -1448,14 +1448,14 @@ final class _WP_Editors {
|
|||
<div id="link-selector">
|
||||
<div id="link-options">
|
||||
<p class="howto"><?php _e( 'Enter the destination URL' ); ?></p>
|
||||
<div>
|
||||
<label><span><?php _e( 'URL' ); ?></span><input id="url-field" type="text" name="href" /></label>
|
||||
<div class="wp-link-text-field">
|
||||
<label><span><?php _e( 'Text' ); ?></span><input id="wp-link-text" type="text" /></label>
|
||||
</div>
|
||||
<div>
|
||||
<label><span><?php _e( 'Title' ); ?></span><input id="link-title-field" type="text" name="linktitle" /></label>
|
||||
<label><span><?php _e( 'URL' ); ?></span><input id="wp-link-url" type="text" /></label>
|
||||
</div>
|
||||
<div class="link-target">
|
||||
<label><span> </span><input type="checkbox" id="link-target-checkbox" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
|
||||
<label><span> </span><input type="checkbox" id="wp-link-target" /> <?php _e( 'Open link in a new window/tab' ); ?></label>
|
||||
</div>
|
||||
</div>
|
||||
<p class="howto"><a href="#" id="wp-link-search-toggle"><?php _e( 'Or link to existing content' ); ?></a></p>
|
||||
|
@ -1463,7 +1463,7 @@ final class _WP_Editors {
|
|||
<div class="link-search-wrapper">
|
||||
<label>
|
||||
<span class="search-label"><?php _e( 'Search' ); ?></span>
|
||||
<input type="search" id="search-field" class="link-search-field" autocomplete="off" />
|
||||
<input type="search" id="wp-link-search" class="link-search-field" autocomplete="off" />
|
||||
<span class="spinner"></span>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
@ -1193,7 +1193,6 @@ i.mce-i-hr:before {
|
|||
-webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
|
||||
box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
|
||||
width: 500px;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
margin-left: -250px;
|
||||
margin-top: -125px;
|
||||
|
@ -1229,6 +1228,14 @@ i.mce-i-hr:before {
|
|||
margin-top: -250px;
|
||||
}
|
||||
|
||||
#wp-link-wrap .wp-link-text-field {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#wp-link-wrap.has-text-field .wp-link-text-field {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#link-modal-title {
|
||||
background: #fcfcfc;
|
||||
border-bottom: 1px solid #dfdfdf;
|
||||
|
@ -1395,6 +1402,10 @@ i.mce-i-hr:before {
|
|||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
top: 172px;
|
||||
}
|
||||
|
||||
.has-text-field #wp-link .query-results {
|
||||
top: 205px;
|
||||
}
|
||||
|
||||
|
@ -1529,11 +1540,14 @@ i.mce-i-hr:before {
|
|||
|
||||
@media screen and ( max-width: 782px ) {
|
||||
#wp-link-wrap {
|
||||
height: 280px;
|
||||
margin-top: -140px;
|
||||
}
|
||||
|
||||
#wp-link-wrap.search-panel-visible .query-results {
|
||||
top: 195px;
|
||||
}
|
||||
|
||||
#wp-link-wrap.search-panel-visible.has-text-field .query-results {
|
||||
top: 235px;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,12 +1,7 @@
|
|||
/* global tinymce */
|
||||
tinymce.PluginManager.add( 'wplink', function( editor ) {
|
||||
var linkButton;
|
||||
|
||||
// Register a command so that it can be invoked by using tinyMCE.activeEditor.execCommand( 'WP_Link' );
|
||||
editor.addCommand( 'WP_Link', function() {
|
||||
if ( ( ! linkButton || ! linkButton.disabled() ) && typeof window.wpLink !== 'undefined' ) {
|
||||
window.wpLink.open( editor.id );
|
||||
}
|
||||
window.wpLink && window.wpLink.open( editor.id );
|
||||
});
|
||||
|
||||
// WP default shortcut
|
||||
|
@ -14,41 +9,18 @@ tinymce.PluginManager.add( 'wplink', function( editor ) {
|
|||
// The "de-facto standard" shortcut, see #27305
|
||||
editor.addShortcut( 'ctrl+k', '', 'WP_Link' );
|
||||
|
||||
function setState( button, node ) {
|
||||
var parent = editor.dom.getParent( node, 'a' ),
|
||||
getView = editor.plugins.wpview ? editor.plugins.wpview.getView : function() { return false; };
|
||||
|
||||
button.disabled( ( editor.selection.isCollapsed() && ! parent ) || ( parent && ! parent.href ) || getView( node ) );
|
||||
button.active( parent && parent.href );
|
||||
}
|
||||
|
||||
editor.addButton( 'link', {
|
||||
icon: 'link',
|
||||
tooltip: 'Insert/edit link',
|
||||
shortcut: 'Alt+Shift+A',
|
||||
cmd: 'WP_Link',
|
||||
|
||||
onPostRender: function() {
|
||||
linkButton = this;
|
||||
|
||||
editor.on( 'nodechange', function( event ) {
|
||||
setState( linkButton, event.element );
|
||||
});
|
||||
}
|
||||
stateSelector: 'a[href]'
|
||||
});
|
||||
|
||||
editor.addButton( 'unlink', {
|
||||
icon: 'unlink',
|
||||
tooltip: 'Remove link',
|
||||
cmd: 'unlink',
|
||||
|
||||
onPostRender: function() {
|
||||
var unlinkButton = this;
|
||||
|
||||
editor.on( 'nodechange', function( event ) {
|
||||
setState( unlinkButton, event.element );
|
||||
});
|
||||
}
|
||||
cmd: 'unlink'
|
||||
});
|
||||
|
||||
editor.addMenuItem( 'link', {
|
||||
|
|
|
@ -7,6 +7,10 @@ var wpLink;
|
|||
rivers = {},
|
||||
isTouch = ( 'ontouchend' in document );
|
||||
|
||||
function getLink() {
|
||||
return editor.dom.getParent( editor.selection.getNode(), 'a' );
|
||||
}
|
||||
|
||||
wpLink = {
|
||||
timeToTriggerRiver: 150,
|
||||
minRiverAJAXDuration: 200,
|
||||
|
@ -21,14 +25,14 @@ var wpLink;
|
|||
inputs.backdrop = $( '#wp-link-backdrop' );
|
||||
inputs.submit = $( '#wp-link-submit' );
|
||||
inputs.close = $( '#wp-link-close' );
|
||||
// URL
|
||||
inputs.url = $( '#url-field' );
|
||||
|
||||
// Input
|
||||
inputs.text = $( '#wp-link-text' );
|
||||
inputs.url = $( '#wp-link-url' );
|
||||
inputs.nonce = $( '#_ajax_linking_nonce' );
|
||||
// Secondary options
|
||||
inputs.title = $( '#link-title-field' );
|
||||
// Advanced Options
|
||||
inputs.openInNewTab = $( '#link-target-checkbox' );
|
||||
inputs.search = $( '#search-field' );
|
||||
inputs.openInNewTab = $( '#wp-link-target' );
|
||||
inputs.search = $( '#wp-link-search' );
|
||||
|
||||
// Build Rivers
|
||||
rivers.search = new River( $( '#search-results' ) );
|
||||
rivers.recent = new River( $( '#most-recent-results' ) );
|
||||
|
@ -129,6 +133,7 @@ var wpLink;
|
|||
inputs.backdrop.show();
|
||||
|
||||
wpLink.refresh();
|
||||
|
||||
$( document ).trigger( 'wplink-open', inputs.wrap );
|
||||
},
|
||||
|
||||
|
@ -144,6 +149,8 @@ var wpLink;
|
|||
if ( wpLink.isMCE() ) {
|
||||
wpLink.mceRefresh();
|
||||
} else {
|
||||
inputs.wrap.removeClass( 'has-text-field' );
|
||||
inputs.text.val( '' );
|
||||
wpLink.setDefaultValues();
|
||||
}
|
||||
|
||||
|
@ -154,8 +161,12 @@ var wpLink;
|
|||
// Focus the URL field and highlight its contents.
|
||||
// If this is moved above the selection changes,
|
||||
// IE will show a flashing cursor over the dialog.
|
||||
if ( inputs.wrap.hasClass( 'has-text-field' ) ) {
|
||||
inputs.text.focus();
|
||||
} else {
|
||||
inputs.url.focus()[0].select();
|
||||
}
|
||||
}
|
||||
|
||||
// Load the most recent results if this is the first time opening the panel.
|
||||
if ( ! rivers.recent.ul.children().length ) {
|
||||
|
@ -165,22 +176,53 @@ var wpLink;
|
|||
correctedURL = inputs.url.val().replace( /^http:\/\//, '' );
|
||||
},
|
||||
|
||||
hasSelectedText: function( linkNode ) {
|
||||
var html = editor.selection.getContent();
|
||||
|
||||
// Partial html and not a fully selected anchor element
|
||||
if ( /</.test( html ) && ( ! /^<a [^>]+>[^<]+<\/a>$/.test( html ) || html.indexOf('href=') === -1 ) ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if ( linkNode ) {
|
||||
var nodes = linkNode.childNodes, i;
|
||||
|
||||
if ( nodes.length === 0 ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
for ( i = nodes.length - 1; i >= 0; i-- ) {
|
||||
if ( nodes[i].nodeType != 3 ) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
mceRefresh: function() {
|
||||
var e;
|
||||
var text,
|
||||
selectedNode = editor.selection.getNode(),
|
||||
linkNode = editor.dom.getParent( selectedNode, 'a[href]' ),
|
||||
onlyText = this.hasSelectedText( linkNode );
|
||||
|
||||
// If link exists, select proper values.
|
||||
if ( e = editor.dom.getParent( editor.selection.getNode(), 'A' ) ) {
|
||||
// Set URL and description.
|
||||
inputs.url.val( editor.dom.getAttrib( e, 'href' ) );
|
||||
inputs.title.val( editor.dom.getAttrib( e, 'title' ) );
|
||||
// Set open in new tab.
|
||||
inputs.openInNewTab.prop( 'checked', ( '_blank' === editor.dom.getAttrib( e, 'target' ) ) );
|
||||
// Update save prompt.
|
||||
if ( linkNode ) {
|
||||
text = linkNode.innerText || linkNode.textContent;
|
||||
inputs.url.val( editor.dom.getAttrib( linkNode, 'href' ) );
|
||||
inputs.openInNewTab.prop( 'checked', '_blank' === editor.dom.getAttrib( linkNode, 'target' ) );
|
||||
inputs.submit.val( wpLinkL10n.update );
|
||||
|
||||
// If there's no link, set the default values.
|
||||
} else {
|
||||
wpLink.setDefaultValues();
|
||||
text = editor.selection.getContent({ format: 'text' });
|
||||
this.setDefaultValues();
|
||||
}
|
||||
|
||||
if ( onlyText ) {
|
||||
inputs.text.val( text || '' );
|
||||
inputs.wrap.addClass( 'has-text-field' );
|
||||
} else {
|
||||
inputs.text.val( '' );
|
||||
inputs.wrap.removeClass( 'has-text-field' );
|
||||
}
|
||||
},
|
||||
|
||||
|
@ -209,39 +251,37 @@ var wpLink;
|
|||
getAttrs: function() {
|
||||
return {
|
||||
href: $.trim( inputs.url.val() ),
|
||||
title: $.trim( inputs.title.val() ),
|
||||
target: inputs.openInNewTab.prop( 'checked' ) ? '_blank' : ''
|
||||
};
|
||||
},
|
||||
|
||||
update: function() {
|
||||
if ( wpLink.isMCE() )
|
||||
if ( wpLink.isMCE() ) {
|
||||
wpLink.mceUpdate();
|
||||
else
|
||||
} else {
|
||||
wpLink.htmlUpdate();
|
||||
}
|
||||
},
|
||||
|
||||
htmlUpdate: function() {
|
||||
var attrs, html, begin, end, cursor, title, selection,
|
||||
var attrs, text, html, begin, end, cursor, selection,
|
||||
textarea = wpLink.textarea;
|
||||
|
||||
if ( ! textarea )
|
||||
if ( ! textarea ) {
|
||||
return;
|
||||
}
|
||||
|
||||
attrs = wpLink.getAttrs();
|
||||
text = inputs.text.val();
|
||||
|
||||
// If there's no href, return.
|
||||
if ( ! attrs.href )
|
||||
if ( ! attrs.href ) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Build HTML
|
||||
html = '<a href="' + attrs.href + '"';
|
||||
|
||||
if ( attrs.title ) {
|
||||
title = attrs.title.replace( /</g, '<' ).replace( />/g, '>' ).replace( /"/g, '"' );
|
||||
html += ' title="' + title + '"';
|
||||
}
|
||||
|
||||
if ( attrs.target ) {
|
||||
html += ' target="' + attrs.target + '"';
|
||||
}
|
||||
|
@ -254,7 +294,7 @@ var wpLink;
|
|||
// Note: If no text is selected, IE will not place the cursor
|
||||
// inside the closing tag.
|
||||
textarea.focus();
|
||||
wpLink.range.text = html + wpLink.range.text + '</a>';
|
||||
wpLink.range.text = html + ( text || wpLink.range.text ) + '</a>';
|
||||
wpLink.range.moveToBookmark( wpLink.range.getBookmark() );
|
||||
wpLink.range.select();
|
||||
|
||||
|
@ -263,16 +303,20 @@ var wpLink;
|
|||
// W3C
|
||||
begin = textarea.selectionStart;
|
||||
end = textarea.selectionEnd;
|
||||
selection = textarea.value.substring( begin, end );
|
||||
selection = text || textarea.value.substring( begin, end );
|
||||
html = html + selection + '</a>';
|
||||
cursor = begin + html.length;
|
||||
|
||||
// If no text is selected, place the cursor inside the closing tag.
|
||||
if ( begin == end )
|
||||
cursor -= '</a>'.length;
|
||||
if ( begin === end && ! selection ) {
|
||||
cursor -= 4;
|
||||
}
|
||||
|
||||
textarea.value = textarea.value.substring( 0, begin ) + html +
|
||||
textarea.value.substring( end, textarea.value.length );
|
||||
textarea.value = (
|
||||
textarea.value.substring( 0, begin ) +
|
||||
html +
|
||||
textarea.value.substring( end, textarea.value.length )
|
||||
);
|
||||
|
||||
// Update cursor position
|
||||
textarea.selectionStart = textarea.selectionEnd = cursor;
|
||||
|
@ -283,8 +327,8 @@ var wpLink;
|
|||
},
|
||||
|
||||
mceUpdate: function() {
|
||||
var link,
|
||||
attrs = wpLink.getAttrs();
|
||||
var attrs = wpLink.getAttrs(),
|
||||
link, text;
|
||||
|
||||
wpLink.close();
|
||||
editor.focus();
|
||||
|
@ -293,33 +337,50 @@ var wpLink;
|
|||
editor.selection.moveToBookmark( editor.windowManager.bookmark );
|
||||
}
|
||||
|
||||
link = editor.dom.getParent( editor.selection.getNode(), 'a[href]' );
|
||||
|
||||
// If the values are empty, unlink and return
|
||||
if ( ! attrs.href || attrs.href == 'http://' ) {
|
||||
if ( ! attrs.href ) {
|
||||
editor.execCommand( 'unlink' );
|
||||
return;
|
||||
}
|
||||
|
||||
link = getLink();
|
||||
text = inputs.text.val();
|
||||
|
||||
if ( link ) {
|
||||
if ( text ) {
|
||||
if ( 'innerText' in link ) {
|
||||
link.innerText = text;
|
||||
} else {
|
||||
link.textContent = text;
|
||||
}
|
||||
}
|
||||
|
||||
editor.dom.setAttribs( link, attrs );
|
||||
} else {
|
||||
if ( text ) {
|
||||
editor.selection.setNode( editor.dom.create( 'a', attrs, text ) );
|
||||
} else {
|
||||
editor.execCommand( 'mceInsertLink', false, attrs );
|
||||
}
|
||||
|
||||
// Move the cursor to the end of the selection
|
||||
editor.selection.collapse();
|
||||
}
|
||||
},
|
||||
|
||||
updateFields: function( e, li ) {
|
||||
inputs.url.val( li.children( '.item-permalink' ).val() );
|
||||
inputs.title.val( li.hasClass( 'no-title' ) ? '' : li.children( '.item-title' ).text() );
|
||||
},
|
||||
|
||||
setDefaultValues: function() {
|
||||
var selection = editor && editor.selection.getContent(),
|
||||
var selection,
|
||||
emailRegexp = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
|
||||
urlRegexp = /^(https?|ftp):\/\/[A-Z0-9.-]+\.[A-Z]{2,4}[^ "]*$/i;
|
||||
urlRegexp = /^(https?|ftp):\/\/[A-Z0-9.-]+\.[A-Z]{2,4}[^ "]*$/i,
|
||||
text;
|
||||
|
||||
if ( this.isMCE() ) {
|
||||
selection = editor.selection.getContent();
|
||||
} else if ( document.selection && wpLink.range ) {
|
||||
selection = wpLink.range.text;
|
||||
} else if ( typeof this.textarea.selectionStart !== 'undefined' ) {
|
||||
selection = this.textarea.value.substring( this.textarea.selectionStart, this.textarea.selectionEnd );
|
||||
}
|
||||
|
||||
if ( selection && emailRegexp.test( selection ) ) {
|
||||
// Selection is email address
|
||||
|
@ -332,9 +393,6 @@ var wpLink;
|
|||
inputs.url.val( '' );
|
||||
}
|
||||
|
||||
// Set description to default.
|
||||
inputs.title.val( '' );
|
||||
|
||||
// Update save prompt.
|
||||
inputs.submit.val( wpLinkL10n.save );
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue