WordPress.org

Make WordPress Core

Ticket #18311: 18311_qtags_ui.3.diff

File 18311_qtags_ui.3.diff, 12.5 KB (added by sushkov, 6 years ago)

Tweaked for usage in From URL and Media->Library tabs

  • wp-admin/css/wp-admin.dev.css

    diff --git wp-admin/css/wp-admin.dev.css wp-admin/css/wp-admin.dev.css
    index 3b9dca7..c675425 100644
    abbr.required { 
    37243724}
    37253725
    37263726.media-item .describe input[type="text"],
    3727 .media-item .describe textarea {
     3727.media-item .describe textarea,
     3728.media-item .wp-editor-wrap {
    37283729        width: 460px;
    37293730}
    37303731
    abbr.required { 
    39063907        border-radius: 3px;
    39073908}
    39083909
    3909 .media-item .post_excerpt textarea {
    3910     height: 60px;
    3911 }
    3912 
    39133910/*------------------------------------------------------------------------------
    39143911  14.1 - Media Library
    39153912------------------------------------------------------------------------------*/
  • wp-admin/includes/media.php

    diff --git wp-admin/includes/media.php wp-admin/includes/media.php
    index 0ae2f10..bff6338 100644
    function image_link_input_fields($post, $url_type = '') { 
    788788";
    789789}
    790790
    791 function wp_caption_input_textarea($edit_post) {
     791/**
     792 * Render an editor for image caption
     793 *
     794 * @see `get_attachment_fields_to_edit()`
     795 * @since 3.4
     796 *
     797 * @param Object $edit_post, media item object, default is false
     798 * @param String $name, the name/id of the textarea if $edit_post is false, default is `caption`
     799 * @param String $caption, value for caption if $edit_post is false, default is ``
     800 * @return String, the generated html
     801 */
     802function wp_caption_input_textarea( $edit_post = false, $name = 'caption', $caption = '' ) {
    792803        // post data is already escaped
    793         $name = "attachments[{$edit_post->ID}][post_excerpt]";
     804        if ( $edit_post ) {
     805                $name = "attachments[{$edit_post->ID}][post_excerpt]";
     806                $caption = $edit_post->post_excerpt;
     807        }
    794808
    795         return '
    796         <textarea class="code" name="' . $name . '" id="' . $name . '">' . $edit_post->post_excerpt . '</textarea>
    797         <div class="edit-caption-controls hide-if-no-js">
    798         <input type="button" class="button caption-insert-link" value="' . esc_attr__('Insert Link') . '" />
    799         <div class="caption-insert-link-wrap hidden">
    800         <label><span>' . __('Link URL') . '</span>
    801         <input type="text" value="" class="caption-insert-link-url" /></label>
    802         <label><span>' . __('Linked text') . '</span>
    803         <input type="text" value="" class="caption-insert-link-text" /></label>
    804         <div class="caption-insert-link-buttons">
    805         <input type="button" class="button caption-cancel" value="' . esc_attr__('Cancel') . '" />
    806         <input type="button" class="button-primary caption-save" value="' . esc_attr__('Insert') . '" />
    807         <br class="clear" />
    808         </div></div></div>
    809         ';
     809        $defaults = array(
     810                'teeny' => true,
     811                'tinymce' => false,
     812                'media_buttons' => false,
     813                'textarea_rows' => 10,
     814                'quicktags' => array(
     815                        'buttons' => 'strong,em,link,del,ins,code,close'
     816                )
     817        );
     818        $settings = apply_filters( 'caption_input_textarea', $defaults, $edit_post );
     819        // Do not load wpLink if tinymce is not present
     820        // Just plain Quicktags link handler
     821        if ( !$settings['tinymce'] )
     822                wp_deregister_script( 'wplink' );
     823
     824        if ( defined( 'IFRAME_REQUEST' ) && IFRAME_REQUEST == true )
     825                wp_enqueue_script( 'quicktags' );
     826
     827        // Use a buffer to get the output, otherway it will just echo everything
     828        ob_start();
     829        wp_editor( $caption, $name, $settings );
     830        return ob_get_clean();
    810831}
    811832
    812833/**
    function get_attachment_fields_to_edit($post, $errors = null) { 
    953974                'post_excerpt' => array(
    954975                        'label'      => __('Default Caption'),
    955976                        'input'      => 'html',
    956                         'html'       => wp_caption_input_textarea($edit_post)
     977                        'html'       => wp_caption_input_textarea( $edit_post )
    957978                ),
    958979                'post_content' => array(
    959980                        'label'      => __('Description'),
    function wp_media_insert_url_form( $default_view = 'image' ) { 
    19511972                        <th valign="top" scope="row" class="label">
    19521973                                <span class="alignleft"><label for="caption">' . __('Image Caption') . '</label></span>
    19531974                        </th>
    1954                         <td class="field"><input id="caption" name="caption" value="" type="text" /></td>
    1955                 </tr>
    1956 ';
     1975                        <td class="field">' . wp_caption_input_textarea() . '</td>
     1976                </tr>';
    19571977        } else {
    19581978                $caption = '';
    19591979        }
  • wp-includes/class-wp-editor.php

    diff --git wp-includes/class-wp-editor.php wp-includes/class-wp-editor.php
    index af69b08..65878e4 100644
    final class _WP_Editors { 
    554554                (function(){
    555555                        var init, ed, qt, first_init, mce = <?php echo wp_default_editor() == 'tinymce' ? 'true' : 'false'; ?>;
    556556
    557                         if ( typeof(tinymce) == 'object' ) {
     557                        if ( typeof(tinymce) == 'object' && tinymce !== null ) {
    558558                                // mark wp_theme/ui.css as loaded
    559559                                tinymce.DOM.files[tinymce.baseURI.getURI() + '/themes/advanced/skins/wp_theme/ui.css'] = true;
    560560
  • wp-includes/js/tinymce/langs/wp-langs-en.js

    diff --git wp-includes/js/tinymce/langs/wp-langs-en.js wp-includes/js/tinymce/langs/wp-langs-en.js
    index 6921eab..53d784a 100644
    s120:"120%", 
    499499s130:"130%",
    500500img_title:"Title",
    501501caption:"Caption",
    502 insert_link:"Insert link",
    503 linked_text:"Linked text",
    504502alt:"Alternate Text"
    505503});
  • wp-includes/js/tinymce/langs/wp-langs.php

    diff --git wp-includes/js/tinymce/langs/wp-langs.php wp-includes/js/tinymce/langs/wp-langs.php
    index 625ef75..6100383 100644
    function wp_mce_translation() { 
    542542                's130' => __('130%'),
    543543                'img_title' => __('Title'),
    544544                'caption' => __('Caption'),
    545                 'insert_link' => __('Insert link'),
    546                 'linked_text' => __('Linked text'),
    547545                'alt' => __('Alternate Text')
    548546        );
    549547
  • wp-includes/js/tinymce/plugins/wpeditimage/editimage.html

    diff --git wp-includes/js/tinymce/plugins/wpeditimage/editimage.html wp-includes/js/tinymce/plugins/wpeditimage/editimage.html
    index 6437801..bddd108 100644
     
    77<link rel="stylesheet" href="css/editimage.css?ver=348" type="text/css" media="all" />
    88<script type="text/javascript" src="js/editimage.js?ver=348"></script>
    99<script type="text/javascript" src="../../utils/form_utils.js?ver=348"></script>
     10<script type='text/javascript'>
     11/* <![CDATA[ */
     12                window.quicktagsL10n = parent.quicktagsL10n || {};
     13/* ]]> */
     14</script>
     15<script type="text/javascript" src="../../../quicktags.js?ver=3.4"></script>
    1016<base target="_self" />
    1117</head>
    1218
    if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') ) 
    101107                                </label>
    102108                        </th>
    103109                        <td class="field">
    104                                 <textarea id="img_cap_text"></textarea>
    105 
    106                                 <div class="edit-caption-controls">
    107                                 <input type="button" class="button caption-insert-link" value="{#wpeditimage.insert_link}" />
    108 
    109                                 <div class="caption-insert-link-wrap hidden">
    110                                 <label><span>{#advanced_dlg.link_url}</span>
    111                                 <input type="text" value="" class="caption-insert-link-url" /></label>
     110                                <textarea id="img_cap_text" rows="5" cols="40"></textarea>
    112111
    113                                 <label><span>{#wpeditimage.linked_text}</span>
    114                                 <input type="text" value="" class="caption-insert-link-text" /></label>
    115 
    116                                 <div class="caption-insert-link-buttons">
    117                                 <input type="button" class="button caption-cancel" value="{#cancel}" />
    118                                 <input type="button" class="button-primary caption-save" value="{#insert}" />
    119112                                <br class="clear" />
    120113                                </div></div></div>
    121114                        </td>
    if ( 'rtl' == tinyMCEPopup.editor.getParam('directionality','') ) 
    285278</form>
    286279</div>
    287280
     281<div id="quicktags">
     282        <textarea id="editor" rows="5" cols="40"></textarea>
     283        <script type='text/javascript'>
     284        /* <![CDATA[ */
     285                        quicktags({
     286                                id: 'editor',
     287                                buttons: 'strong,em,link,del,ins,code,close'
     288                        });
     289        /* ]]> */
     290        </script>
     291</div>
     292
    288293</body>
    289294</html>
  • wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js

    diff --git wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js
    index 5a27d10..51c32ce 100644
    wpImage = { 
    236236        },
    237237
    238238        init : function() {
    239                 var ed = tinyMCEPopup.editor, h;
     239                var ed = tinyMCEPopup.editor, header, img_edit;
     240
     241                header = document.getElementById('media-upload-header');
     242                img_edit = document.getElementById('img-edit');
     243                header.innerHTML = ed.translate(header.innerHTML);
     244                img_edit.innerHTML = ed.translate(img_edit.innerHTML);
    240245
    241                 h = document.body.innerHTML;
    242                 document.body.innerHTML = ed.translate(h);
    243246                window.setTimeout( function(){wpImage.setup();}, 500 );
    244247        },
    245248
    246249        setup : function() {
    247250                var t = this, c, el, link, fname, f = document.forms[0], ed = tinyMCEPopup.editor,
    248                         d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa, bookmark, insert_link;
     251                        d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa;
    249252
    250253                document.dir = tinyMCEPopup.editor.getParam('directionality','');
    251254
    wpImage = { 
    329332                if ( t.width && t.preloadImg.width )
    330333                        t.showSizeSet();
    331334               
    332                 document.body.style.display = '';
    333 
    334                 tinyMCEPopup.events.add(document.body, 'click', function(e) {
    335                         var target = e.target, parent = target.parentNode, tr, c, el, textarea, sel, text, startPos, endPos;
    336 
    337                         if ( dom.hasClass(target, 'caption-insert-link') ) {
    338                                 el = dom.select('div.caption-insert-link-wrap', parent)[0], textarea = dom.select('#img_cap_text')[0];
    339 
    340                                 if ( document.selection ) {
    341                                         textarea.focus();
    342                                         sel = document.selection.createRange();
    343                                         bookmark = sel.getBookmark();
    344 
    345                                         if ( sel.text )
    346                                                 dom.select('.caption-insert-link-text', el)[0].value = sel.text;
    347 
    348                                 } else if ( textarea.selectionStart || textarea.selectionStart == '0' ) {
    349                                         text = textarea.value;
    350                                         startPos = textarea.selectionStart;
    351                                         endPos = textarea.selectionEnd;
    352 
    353                                         if ( startPos != endPos )
    354                                                 dom.select('.caption-insert-link-text', el)[0].value = text.substring(startPos, endPos);
    355                                 }
    356 
    357                                 dom.hide(target);
    358                                 dom.show(el);
    359                                 dom.select('.caption-insert-link-url', el)[0].focus();
    360                         } else if ( dom.hasClass(target, 'caption-cancel') || dom.hasClass(target, 'caption-save') ) {
    361                                 if ( dom.hasClass(target, 'caption-save') )
    362                                         insert_link();
    363 
    364                                 dom.hide( dom.select('.caption-insert-link-wrap') );
    365                                 dom.show( dom.select('.caption-insert-link') );
    366                         }
    367                 });
    368 
    369                 insert_link = function() {
    370                         var sel, content, startPos, endPos, scrollTop, text, textarea = dom.select('#img_cap_text')[0],
    371                                 url = dom.select('.caption-insert-link-url')[0], link_text = dom.select('.caption-insert-link-text')[0];
    372 
    373                         if ( !url || !link_text )
    374                                 return;
    375 
    376                         content = "<a href='"+url.value+"'>"+link_text.value+"</a>";
     335                // Setup the quicktags
     336                wpImage.enableQTags();
    377337
    378                         if ( document.selection ) {
    379                                 textarea.focus();
    380                                 sel = document.selection.createRange();
    381 
    382                                 if ( bookmark ) {
    383                                         sel.moveToBookmark( bookmark );
    384                                         bookmark = '';
    385                                 }
    386 
    387                                 sel.text = content;
    388                                 textarea.focus();
    389                         } else if ( textarea.selectionStart || textarea.selectionStart == '0' ) {
    390                                 text = textarea.value;
    391                                 startPos = textarea.selectionStart;
    392                                 endPos = textarea.selectionEnd;
    393                                 scrollTop = textarea.scrollTop;
    394 
    395                                 textarea.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
    396 
    397                                 textarea.focus();
    398                                 textarea.selectionStart = startPos + content.length;
    399                                 textarea.selectionEnd = startPos + content.length;
    400                                 textarea.scrollTop = scrollTop;
    401                         }
    402 
    403                         url.value = '';
    404                         link_text.value = '';
    405                 };
     338                document.body.style.display = '';
    406339        },
    407340
    408341        remove : function() {
    wpImage = { 
    684617                t.preloadImg.onload = t.updateImageData;
    685618                t.preloadImg.onerror = t.resetImageData;
    686619                t.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.img_src.value);
     620        },
     621
     622        /**
     623         * Enables a Quicktags editor for the caption textarea
     624         */
     625        enableQTags : function() {
     626                var old = document.getElementById('img_cap_text');
     627                var neu = document.getElementById('quicktags');
     628                var editor = document.getElementById('editor');
     629                var buttons = document.getElementById('qt_editor_toolbar').childNodes;
     630
     631                // Add button classes to quicktags buttons
     632                for (var i=0; i<buttons.length; i++) {
     633                        buttons[i].className += ' button';
     634                }
     635
     636                // Move the new quicktags where old textarea used to be
     637                // QTags breaks if you leave it inside an element that calls `ed.translate()`
     638                old.parentNode.appendChild(neu);
     639                // Hide old textarea, don't remove, it's still being used
     640                old.style.display = 'none';
     641
     642                // Map old textarea value to the new quicktags
     643                editor.value = old.value;
     644                // Replace double-quotes so tinyMCE caption don't break
     645                editor.onblur = function() {
     646                        old.value = this.value.replace(/"/g, "'");
     647                }
    687648        }
    688649};
    689650
    690651window.onload = function(){wpImage.init();}
    691652wpImage.preInit();
    692