Ticket #18311: 18311_qtags_ui.4.diff

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

@@ -3724 +3724 @@
 }
 
 .media-item .describe input[type="text"],
-.media-item .describe textarea {
+.media-item .describe textarea,
+.media-item .wp-editor-wrap {
         width: 460px;
 }
 
@@ -3906 +3907 @@
         border-radius: 3px;
 }
 
-.media-item .post_excerpt textarea {
-    height: 60px;
-}
-
 /*------------------------------------------------------------------------------
   14.1 - Media Library
 ------------------------------------------------------------------------------*/

wp-admin/includes/media.php

@@ -791 +791 @@
 ";
 }
 
-function wp_caption_input_textarea($edit_post) {
+/**
+ * Render an editor for image caption
+ *
+ * @see `get_attachment_fields_to_edit()`
+ * @since 3.4
+ *
+ * @param Object $edit_post, media item object, default is false
+ * @param String $name, the name/id of the textarea if $edit_post is false, default is `caption`
+ * @param String $caption, value for caption if $edit_post is false, default is ``
+ * @return String, the generated html
+ */
+function wp_caption_input_textarea( $edit_post = false, $name = 'caption', $caption = '' ) {
         // post data is already escaped
-        $name = "attachments[{$edit_post->ID}][post_excerpt]";
+        if ( $edit_post ) {
+                $name = "attachments[{$edit_post->ID}][post_excerpt]";
+                $caption = $edit_post->post_excerpt;
+        }
 
-        return '
-        <textarea class="code" name="' . $name . '" id="' . $name . '">' . $edit_post->post_excerpt . '</textarea>
-        <div class="edit-caption-controls hide-if-no-js">
-        <input type="button" class="button caption-insert-link" value="' . esc_attr__('Insert Link') . '" />
-        <div class="caption-insert-link-wrap hidden">
-        <label><span>' . __('Link URL') . '</span>
-        <input type="text" value="" class="caption-insert-link-url" /></label>
-        <label><span>' . __('Linked text') . '</span>
-        <input type="text" value="" class="caption-insert-link-text" /></label>
-        <div class="caption-insert-link-buttons">
-        <input type="button" class="button caption-cancel" value="' . esc_attr__('Cancel') . '" />
-        <input type="button" class="button-primary caption-save" value="' . esc_attr__('Insert') . '" />
-        <br class="clear" />
-        </div></div></div>
-        ';
+        $defaults = array( 
+                'teeny' => true,
+                'tinymce' => false,
+                'media_buttons' => false,
+                'textarea_rows' => 10,
+                'quicktags' => array(
+                        'buttons' => 'strong,em,link,del,ins,code,close'
+                )
+        ); 
+        $settings = apply_filters( 'caption_input_textarea', $defaults, $edit_post );
+
+        if ( defined( 'IFRAME_REQUEST' ) && IFRAME_REQUEST == true ) {
+                wp_enqueue_script( 'quicktags' );
+                wp_enqueue_script('wplink');
+        }
+
+        // Use a buffer to get the output, otherway it will just echo everything
+        ob_start();
+        wp_editor( $caption, $name, $settings );
+        return ob_get_clean();
 }
 
 /**
@@ -956 +975 @@
                 'post_excerpt' => array(
                         'label'      => __('Default Caption'),
                         'input'      => 'html',
-                        'html'       => wp_caption_input_textarea($edit_post)
+                        'html'       => wp_caption_input_textarea( $edit_post )
                 ),
                 'post_content' => array(
                         'label'      => __('Description'),
@@ -1954 +1973 @@
                         <th valign="top" scope="row" class="label">
                                 <span class="alignleft"><label for="caption">' . __('Image Caption') . '</label></span>
                         </th>
-                        <td class="field"><input id="caption" name="caption" value="" type="text" /></td>
-                </tr>
-';
+                        <td class="field">' . wp_caption_input_textarea() . '</td>
+                </tr>';
         } else {
                 $caption = '';
         }

wp-includes/class-wp-editor.php

@@ -554 +554 @@
                 (function(){
                         var init, ed, qt, first_init, mce = <?php echo wp_default_editor() == 'tinymce' ? 'true' : 'false'; ?>;
 
-                        if ( typeof(tinymce) == 'object' ) {
+                        if ( typeof(tinymce) == 'object' && tinymce !== null ) {
                                 // mark wp_theme/ui.css as loaded
                                 tinymce.DOM.files[tinymce.baseURI.getURI() + '/themes/advanced/skins/wp_theme/ui.css'] = true;
 

wp-includes/js/tinymce/langs/wp-langs-en.js

@@ -499 +499 @@
 s130:"130%",
 img_title:"Title",
 caption:"Caption",
-insert_link:"Insert link",
-linked_text:"Linked text",
 alt:"Alternate Text"
 });

wp-includes/js/tinymce/langs/wp-langs.php

@@ -542 +542 @@
                 's130' => __('130%'),
                 'img_title' => __('Title'),
                 'caption' => __('Caption'),
-                'insert_link' => __('Insert link'),
-                'linked_text' => __('Linked text'),
                 'alt' => __('Alternate Text')
         );
 

wp-includes/js/tinymce/plugins/wpdialogs/js/wpdialog.dev.js

@@ -8 +8 @@
                 open: function() {
                         var ed;
 
-                        // Initialize tinyMCEPopup if it exists and is the editor is active.
+                        // Try to load tinyMCEPopup from parent window if we are inside an iframe
+                        if ( typeof(tinyMCEPopup) === 'undefined' && window !== parent )
+                                window.tinyMCEPopup = parent.tinyMCEPopup;
+
+                        // Initialize tinyMCEPopup if it exists and if the editor is active.
                         if ( tinyMCEPopup && typeof tinyMCE != 'undefined' && ( ed = tinyMCE.activeEditor ) && !ed.isHidden() ) {
                                 tinyMCEPopup.init();
                         }

wp-includes/js/tinymce/plugins/wpeditimage/editimage.html

@@ -7 +7 @@
 <link rel="stylesheet" href="css/editimage.css?ver=348" type="text/css" media="all" />
 <script type="text/javascript" src="js/editimage.js?ver=348"></script>
 <script type="text/javascript" src="../../utils/form_utils.js?ver=348"></script>
+<script type='text/javascript'>
+/* <![CDATA[ */
+                window.quicktagsL10n = parent.quicktagsL10n || {};
+/* ]]> */
+</script>
+<script type="text/javascript" src="../../../quicktags.js?ver=3.4"></script>
 <base target="_self" />
 </head>
 
@@ -101 +107 @@
                                 </label>
                         </th>
                         <td class="field">
-                                <textarea id="img_cap_text"></textarea>
-
-                                <div class="edit-caption-controls">
-                                <input type="button" class="button caption-insert-link" value="{#wpeditimage.insert_link}" />
-
-                                <div class="caption-insert-link-wrap hidden">
-                                <label><span>{#advanced_dlg.link_url}</span>
-                                <input type="text" value="" class="caption-insert-link-url" /></label>
+                                <textarea id="img_cap_text" rows="5" cols="40"></textarea>
 
-                                <label><span>{#wpeditimage.linked_text}</span>
-                                <input type="text" value="" class="caption-insert-link-text" /></label>
-
-                                <div class="caption-insert-link-buttons">
-                                <input type="button" class="button caption-cancel" value="{#cancel}" />
-                                <input type="button" class="button-primary caption-save" value="{#insert}" />
                                 <br class="clear" />
                                 </div></div></div>
                         </td>
@@ -285 +278 @@
 </form>
 </div>
 
+<div id="quicktags">
+        <textarea id="editor" rows="5" cols="40"></textarea>
+        <script type='text/javascript'>
+        /* <![CDATA[ */
+                        quicktags({
+                                id: 'editor',
+                                buttons: 'strong,em,link,del,ins,code,close'
+                        });
+        /* ]]> */
+        </script>
+</div>
+
 </body>
 </html>

wp-includes/js/tinymce/plugins/wpeditimage/js/editimage.dev.js

@@ -236 +236 @@
         },
 
         init : function() {
-                var ed = tinyMCEPopup.editor, h;
+                var ed = tinyMCEPopup.editor, header, img_edit;
+
+                header = document.getElementById('media-upload-header');
+                img_edit = document.getElementById('img-edit');
+                header.innerHTML = ed.translate(header.innerHTML);
+                img_edit.innerHTML = ed.translate(img_edit.innerHTML);
 
-                h = document.body.innerHTML;
-                document.body.innerHTML = ed.translate(h);
                 window.setTimeout( function(){wpImage.setup();}, 500 );
         },
 
         setup : function() {
                 var t = this, c, el, link, fname, f = document.forms[0], ed = tinyMCEPopup.editor,
-                        d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa, bookmark, insert_link;
+                        d = t.I('img_demo'), dom = tinyMCEPopup.dom, DL, DD, caption = '', dlc, pa;
 
                 document.dir = tinyMCEPopup.editor.getParam('directionality','');
 
@@ -329 +332 @@
                 if ( t.width && t.preloadImg.width )
                         t.showSizeSet();
                 
-                document.body.style.display = '';
-
-                tinyMCEPopup.events.add(document.body, 'click', function(e) {
-                        var target = e.target, parent = target.parentNode, tr, c, el, textarea, sel, text, startPos, endPos;
-
-                        if ( dom.hasClass(target, 'caption-insert-link') ) {
-                                el = dom.select('div.caption-insert-link-wrap', parent)[0], textarea = dom.select('#img_cap_text')[0];
-
-                                if ( document.selection ) {
-                                        textarea.focus();
-                                        sel = document.selection.createRange();
-                                        bookmark = sel.getBookmark();
-
-                                        if ( sel.text )
-                                                dom.select('.caption-insert-link-text', el)[0].value = sel.text;
-
-                                } else if ( textarea.selectionStart || textarea.selectionStart == '0' ) {
-                                        text = textarea.value;
-                                        startPos = textarea.selectionStart;
-                                        endPos = textarea.selectionEnd;
-
-                                        if ( startPos != endPos )
-                                                dom.select('.caption-insert-link-text', el)[0].value = text.substring(startPos, endPos);
-                                }
-
-                                dom.hide(target);
-                                dom.show(el);
-                                dom.select('.caption-insert-link-url', el)[0].focus();
-                        } else if ( dom.hasClass(target, 'caption-cancel') || dom.hasClass(target, 'caption-save') ) {
-                                if ( dom.hasClass(target, 'caption-save') )
-                                        insert_link();
-
-                                dom.hide( dom.select('.caption-insert-link-wrap') );
-                                dom.show( dom.select('.caption-insert-link') );
-                        }
-                });
-
-                insert_link = function() {
-                        var sel, content, startPos, endPos, scrollTop, text, textarea = dom.select('#img_cap_text')[0],
-                                url = dom.select('.caption-insert-link-url')[0], link_text = dom.select('.caption-insert-link-text')[0];
-
-                        if ( !url || !link_text )
-                                return;
-
-                        content = "<a href='"+url.value+"'>"+link_text.value+"</a>";
+                // Setup the quicktags
+                wpImage.enableQTags();
 
-                        if ( document.selection ) {
-                                textarea.focus();
-                                sel = document.selection.createRange();
-
-                                if ( bookmark ) {
-                                        sel.moveToBookmark( bookmark );
-                                        bookmark = '';
-                                }
-
-                                sel.text = content;
-                                textarea.focus();
-                        } else if ( textarea.selectionStart || textarea.selectionStart == '0' ) {
-                                text = textarea.value;
-                                startPos = textarea.selectionStart;
-                                endPos = textarea.selectionEnd;
-                                scrollTop = textarea.scrollTop;
-
-                                textarea.value = text.substring(0, startPos) + content + text.substring(endPos, text.length);
-
-                                textarea.focus();
-                                textarea.selectionStart = startPos + content.length;
-                                textarea.selectionEnd = startPos + content.length;
-                                textarea.scrollTop = scrollTop;
-                        }
-
-                        url.value = '';
-                        link_text.value = '';
-                };
+                document.body.style.display = '';
         },
 
         remove : function() {
@@ -684 +617 @@
                 t.preloadImg.onload = t.updateImageData;
                 t.preloadImg.onerror = t.resetImageData;
                 t.preloadImg.src = tinyMCEPopup.editor.documentBaseURI.toAbsolute(f.img_src.value);
+        },
+
+        /**
+         * Enables a Quicktags editor for the caption textarea
+         */
+        enableQTags : function() {
+                var old = document.getElementById('img_cap_text');
+                var neu = document.getElementById('quicktags');
+                var editor = document.getElementById('editor');
+                var buttons = document.getElementById('qt_editor_toolbar').childNodes;
+
+                // Add button classes to quicktags buttons
+                for (var i=0; i<buttons.length; i++) {
+                        buttons[i].className += ' button';
+                }
+
+                // Move the new quicktags where old textarea used to be
+                // QTags breaks if you leave it inside an element that calls `ed.translate()`
+                old.parentNode.appendChild(neu);
+                // Hide old textarea, don't remove, it's still being used
+                old.style.display = 'none';
+
+                // Map old textarea value to the new quicktags
+                editor.value = old.value;
+                // Replace double-quotes so tinyMCE caption don't break
+                editor.onblur = function() {
+                        old.value = this.value.replace(/"/g, "'");
+                }
         }
 };
 
 window.onload = function(){wpImage.init();}
 wpImage.preInit();
-

wp-includes/js/wplink.dev.js

@@ -62 +62 @@
                         if ( !wpActiveEditor )
                                 return;
 
-                        this.textarea = $('#'+wpActiveEditor).get(0);
+                        this.textarea = document.getElementById(wpActiveEditor);
 
                         // Initialize the dialog if necessary (html mode).
                         if ( ! inputs.dialog.data('wpdialog') ) {