WordPress.org

Make WordPress Core

Opened 7 years ago

Closed 2 years ago

#26881 closed defect (bug) (invalid)

Multiple wp_editor() on one page and link button broken

Reported by: machinedean Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.8
Component: Editor Keywords:
Focuses: Cc:

Description (last modified by chriscct7)

Hopefully this is enough information. It doesn't appear that anyone else has reported this bug. I've also extensively Googled to see if there a fix but with no luck.

We typically use multiple wp_editor() functions for custom post types as this provides an easier interface for our users.

Unfortunately, it appears with the most recent version of WordPress (3.8) some of the functionality is now broken. This is reported for at least 2 of our websites and we're holding off on updating WordPress on our other websites until this is resolved.

  1. Firstly, I highlight text that I want to make into a link
  2. Pressing the 'link' button (in Text mode only) opens the dialogue as usual
  3. After entering the URL, I press 'Add link' and nothing happens.

If I close the dialogue box I get the following error in console:

"TypeError: wpLink.textarea is undefined"

If I click the 'link' button again the dialogue does not appear but the lightbox overlay covers the screen.

I could be wrong but I think the issue is to do with the id 'wp-link-submit'. I believe this is the case since the functionality for the default editor works fine and the wp_editor()'s underneath do not.

Please let me know if you need any further information.

Change History (11)

#1 @azaozz
7 years ago

Hi @machinedean. Most likely caused by the wpActiveEditor JS global being 'undefined'. There is some JS outputted from WP_Editor that sets wpActiveEditor on interaction with the textarea, may need to add something similar/more in your plugin.

Could you test your code in trunk. There were some changes to wpLink as part of the TinyMCE 4.0 upgrade, and this should work properly now.

#2 @azaozz
7 years ago

  • Keywords reporter-feedback added

#3 @iseulde
6 years ago

  • Milestone Awaiting Review deleted
  • Resolution set to worksforme
  • Status changed from new to closed

No feedback in a year. I have tested this and it works fine. Please reopen if this is still an issue in WordPress 4.1.

#4 @torresio
6 years ago

  • Resolution worksforme deleted
  • Status changed from closed to reopened
  • Version 3.8 deleted

Hello all,

I've come across this bug in a feature recently created on a 4.1.1. While creating various wp_editors inside of different accordion tabs inside of a custom metabox, everything works except when trying to add a link / close the link modal. Selecting text, and clicking on the link button brings up the add link modal but trying to close the modal throws a JS error and cannot be closed, forcing a refresh. Here is the error:

  • Uncaught TypeError: Cannot read property 'focus' of undefined
    • wpLink.close

Entering "window.wpActiveEditor" in the console shows the right textarea ID but "wpLink.textarea" returns undefined. I searched for hours across the internet, and this is the closest I've found to someone else having the same problem.

Last edited 6 years ago by torresio (previous) (diff)

#5 @DrewAPicture
6 years ago

  • Version set to 3.8

Hi @torresio,

Are you also getting this error in the latest revision of trunk.

Also, the version field indicates when the problem could first be reproduced.

#6 @torresio
6 years ago

Thanks for correcting the change I made in error.

Tried it on the trunk just now (revision 31898) and am still experiencing the same lockup. Seeing a new error also...

  • Uncaught TypeError: Cannot read property 'selectionStart' of undefined
  • wpLink.setDefaultValues
  • wpLink.refresh
Last edited 6 years ago by torresio (previous) (diff)

#7 follow-up: @xwolf
6 years ago

  • Version 3.8 deleted

After updating to 4.2 today this error happens also to my code:
Search field wont get populated anymore, modal window wont get closed.

(it worked fine till 4.1.3)

My code:

wp_enqueue_script( 'wp-link' );
	    echo '<div class="linkinput">';
	    $rand = rand();
	    echo '<h2 class="label">'.$labeltext.'</h2>';
	     if (strlen(trim($howtotext))) {
		echo '<p class="howto">';
		echo $howtotext;
		echo "</p>\n";
	    }
	    echo '<div class="linkentry" id="container_'.$rand.'">';
	    echo "<p>\n";
	    echo '<label for="title_'.$rand.'_'.$name.'">'.__('Title','wphelper');   
	    echo "</label><br />\n";
	    echo '<input type="text" class="large-text" name="'.$name.'_title" id="title_'.$rand.'_'.$name.'" value="'.$pretitle.'">';
	    echo "</p>\n";	    
	    echo "<p>\n";
	    echo '<label for="url_'.$rand.'_'.$name.'">'.__('URL','wphelper');  
	    echo "</label><br />\n";
	    echo '<input type="url" class="large-text" name="'.$name.'_url" id="url_'.$rand.'_'.$name.'" value="'.$preurl.'" placeholder="https://">';
	    echo "</p>";
	    echo '<p><input class="button link_button_'.$name.'" name="link_button_'.$name.'" id="link_button_'.$name.'" type="button" value="'.__('Chose Link','wphelper').'"></p>';
	    echo "</div>\n";
	   
	    ?>
	   <script>
		var _link_sideload = false; 
		var link_btn_<?php echo $name?> = (function($){
		    var _link_sideload = false; 
		    function _init() {
			$('.link_button_<?php echo $name?>').on('click', function(event) {
			    _addLinkListeners();
			    _link_sideload = false;
			    var link_val_container = $('#url_<?php echo $rand?>_<?php echo $name?>');
			    window.wpActiveEditor = true;
			    _link_sideload = true;
			    wpLink.open();
			    wpLink.textarea = $(link_val_container);
			    return false;
			});
		    }
		    function _addLinkListeners() {
			$('body').on('click', '#wp-link-submit', function(event) {
			    var linkAtts = wpLink.getAttrs();
			    $('#url_<?php echo $rand?>_<?php echo $name?>').val(linkAtts.href);
			    $('#title_<?php echo $rand?>_<?php echo $name?>').val(linkAtts.title);
			    _removeLinkListeners();
			    return false;
			});
			$('body').on('click', '#wp-link-cancel', function(event) {
			    _removeLinkListeners();
			    return false;
			});
		    }

		    function _removeLinkListeners() {
			if(_link_sideload){
			    if ( typeof wpActiveEditor != 'undefined') {
				wpActiveEditor = undefined;
			    }
			}
			wpLink.close();
			wpLink.textarea = $('html');//focus on document
			$('body').off('click', '#wp-link-submit');
			$('body').off('click', '#wp-link-cancel');
		    }
		    return {
			init:       _init,
		    };
		    })(jQuery);
	   
	    jQuery(document).ready(function($) {	 
		 link_btn_<?php echo $name?>.init();
	    });
	  
	   </script> 		    	    
	   <?php 
        
	 echo "</div>\n";


#8 @SergeyBiryukov
6 years ago

  • Milestone set to Awaiting Review
  • Version set to 3.8

#9 in reply to: ↑ 7 ; follow-up: @azaozz
6 years ago

Replying to xwolf:

Not sure what you're trying to do here, but these hacks look pretty bad:

if ( typeof wpActiveEditor != 'undefined') {
  wpActiveEditor = undefined;
}
...
wpLink.textarea = $('html');

You're removing the (needed) reference to the active editor and setting the textarea to the documentElement? Why?

#10 in reply to: ↑ 9 @xwolf
6 years ago

You're removing the (needed) reference to the active editor and setting the textarea to the documentElement? Why?

Cause this is not in an active editor textarea - I am using the code as a function to allow site-autors entering links in a metabox. E.g. a list of contextual links. Therfor i cannot use the widget-link, nor the normal wpeditor().

#11 @chriscct7
2 years ago

  • Description modified (diff)
  • Keywords reporter-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from reopened to closed

No longer possible to replicate as of WordPress 4.9. This was likely fixed when WordPress renovated the link editing experience a while ago.

Note: See TracTickets for help on using tickets.