WordPress.org

Make WordPress Core

Changeset 32931


Ignore:
Timestamp:
06/24/2015 11:04:46 PM (6 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:
2 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-includes/css/editor.css

    r32899 r32931  
    16001600}
    16011601
     1602.wp-link-preview {
     1603    float: left;
     1604    margin: 5px;
     1605}
     1606
     1607.wp-link-preview a {
     1608    color: #0073aa;
     1609    text-decoration: underline;
     1610    -webkit-transition-property: border, background, color;
     1611    transition-property: border, background, color;
     1612    -webkit-transition-duration: .05s;
     1613    transition-duration: .05s;
     1614    -webkit-transition-timing-function: ease-in-out;
     1615    transition-timing-function: ease-in-out;
     1616    cursor: pointer;
     1617}
     1618
    16021619/* =Overlay Body
    16031620-------------------------------------------------------------- */
  • trunk/src/wp-includes/js/tinymce/plugins/wplink/plugin.js

    r32817 r32931  
    11/* global tinymce */
    22tinymce.PluginManager.add( 'wplink', function( editor ) {
     3    var toolbar;
     4
    35    editor.addCommand( 'WP_Link', function() {
    46        window.wpLink && window.wpLink.open( editor.id );
     
    4951        }
    5052    } );
     53
     54    tinymce.ui.WPLinkPreview = tinymce.ui.Control.extend( {
     55        url: '#',
     56        renderHtml: function() {
     57            return (
     58                '<div id="' + this._id + '" class="wp-link-preview">' +
     59                    '<a href="' + this.url + '" target="_blank" tabindex="-1">' + this.url + '</a>' +
     60                '</div>'
     61            );
     62        },
     63        setURL: function( url ) {
     64            var index, lastIndex;
     65
     66            if ( this.url !== url ) {
     67                this.url = url;
     68
     69                url = window.decodeURIComponent( url );
     70
     71                url = url.replace( /^(?:https?:)?\/\/(?:www\.)?/, '' );
     72
     73                if ( ( index = url.indexOf( '?' ) ) !== -1 ) {
     74                    url = url.slice( 0, index );
     75                }
     76
     77                if ( ( index = url.indexOf( '#' ) ) !== -1 ) {
     78                    url = url.slice( 0, index );
     79                }
     80
     81                url = url.replace( /(?:index)?\.html$/, '' );
     82
     83                if ( ( lastIndex = url.lastIndexOf( '/' ) ) === url.length - 1 ) {
     84                    url = url.slice( 0, lastIndex );
     85                }
     86
     87                if ( ( index = url.indexOf( '/' ) ) !== -1 && ( lastIndex = url.lastIndexOf( '/' ) ) !== -1 && lastIndex !== index ) {
     88                    url = url.slice( 0, index + 1 ) + '\u2026' + url.slice( lastIndex, url.length );
     89                }
     90
     91                tinymce.$( this.getEl().firstChild ).attr( 'href', this.url ).text( url );
     92            }
     93        },
     94        postRender: function() {
     95            var self = this;
     96
     97            editor.on( 'wptoolbar', function( event ) {
     98                var anchor = editor.dom.getParent( event.element, 'a' ),
     99                    href;
     100
     101                if ( anchor && ( href = editor.$( anchor ).attr( 'href' ) ) ) {
     102                    self.setURL( href );
     103
     104                    event.element = anchor;
     105                    event.toolbar = toolbar;
     106                }
     107            } );
     108        }
     109    } );
     110
     111    editor.addButton( 'wp_link_edit', {
     112        tooltip: 'Edit ', // trailing space is needed, used for context
     113        icon: 'dashicon dashicons-edit',
     114        cmd: 'WP_Link'
     115    } );
     116
     117    editor.addButton( 'wp_link_remove', {
     118        tooltip: 'Remove',
     119        icon: 'dashicon dashicons-no',
     120        cmd: 'unlink'
     121    } );
     122
     123    editor.on( 'preinit', function() {
     124        toolbar = editor.wp._createToolbar( [
     125            'WPLinkPreview',
     126            'wp_link_edit',
     127            'wp_link_remove'
     128        ], true );
     129    } );
    51130});
Note: See TracChangeset for help on using the changeset viewer.