Changeset 32931

Timestamp:

06/24/2015 11:04:46 PM (10 years ago)

Author:

iseulde

Message:

TinyMCE: wplink: add inline toolbar

Now the URL can be viewed as soon as you put the cursor in an anchor tag. Clicking on it will open the page in a new tab. You also have the edit and remove button close at hand.

First run.
See #32604.

Location:

trunk/src/wp-includes

Files:

• css/editor.css (modified) (1 diff)
• js/tinymce/plugins/wplink/plugin.js (modified) (2 diffs)

trunk/src/wp-includes/css/editor.css

@@ -1600 +1600 @@
 }
 
+.wp-link-preview {
+    float: left;
+    margin: 5px;
+}
+
+.wp-link-preview a {
+    color: #0073aa;
+    text-decoration: underline;
+    -webkit-transition-property: border, background, color;
+    transition-property: border, background, color;
+    -webkit-transition-duration: .05s;
+    transition-duration: .05s;
+    -webkit-transition-timing-function: ease-in-out;
+    transition-timing-function: ease-in-out;
+    cursor: pointer;
+}
+
 /* =Overlay Body
 -------------------------------------------------------------- */

trunk/src/wp-includes/js/tinymce/plugins/wplink/plugin.js

@@ -1 +1 @@
 /* global tinymce */
 tinymce.PluginManager.add( 'wplink', function( editor ) {
+    var toolbar;
+
     editor.addCommand( 'WP_Link', function() {
         window.wpLink && window.wpLink.open( editor.id );
@@ -49 +51 @@
         }
     } );
+
+    tinymce.ui.WPLinkPreview = tinymce.ui.Control.extend( {
+        url: '#',
+        renderHtml: function() {
+            return (
+                '<div id="' + this._id + '" class="wp-link-preview">' +
+                    '<a href="' + this.url + '" target="_blank" tabindex="-1">' + this.url + '</a>' +
+                '</div>'
+            );
+        },
+        setURL: function( url ) {
+            var index, lastIndex;
+
+            if ( this.url !== url ) {
+                this.url = url;
+
+                url = window.decodeURIComponent( url );
+
+                url = url.replace( /^(?:https?:)?\/\/(?:www\.)?/, '' );
+
+                if ( ( index = url.indexOf( '?' ) ) !== -1 ) {
+                    url = url.slice( 0, index );
+                }
+
+                if ( ( index = url.indexOf( '#' ) ) !== -1 ) {
+                    url = url.slice( 0, index );
+                }
+
+                url = url.replace( /(?:index)?\.html$/, '' );
+
+                if ( ( lastIndex = url.lastIndexOf( '/' ) ) === url.length - 1 ) {
+                    url = url.slice( 0, lastIndex );
+                }
+
+                if ( ( index = url.indexOf( '/' ) ) !== -1 && ( lastIndex = url.lastIndexOf( '/' ) ) !== -1 && lastIndex !== index ) {
+                    url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex, url.length );
+                }
+
+                tinymce.$( this.getEl().firstChild ).attr( 'href', this.url ).text( url );
+            }
+        },
+        postRender: function() {
+            var self = this;
+
+            editor.on( 'wptoolbar', function( event ) {
+                var anchor = editor.dom.getParent( event.element, 'a' ),
+                    href;
+
+                if ( anchor && ( href = editor.$( anchor ).attr( 'href' ) ) ) {
+                    self.setURL( href );
+
+                    event.element = anchor;
+                    event.toolbar = toolbar;
+                }
+            } );
+        }
+    } );
+
+    editor.addButton( 'wp_link_edit', {
+        tooltip: 'Edit ', // trailing space is needed, used for context
+        icon: 'dashicon dashicons-edit',
+        cmd: 'WP_Link'
+    } );
+
+    editor.addButton( 'wp_link_remove', {
+        tooltip: 'Remove',
+        icon: 'dashicon dashicons-no',
+        cmd: 'unlink'
+    } );
+
+    editor.on( 'preinit', function() {
+        toolbar = editor.wp._createToolbar( [
+            'WPLinkPreview',
+            'wp_link_edit',
+            'wp_link_remove'
+        ], true );
+    } );
 });