Skip to:
Content
Pages
Categories
Search
Top
Bottom

Buddypress autocomplete breaks with TinyMCE

  • @ajoyce2016

    Participant

    So Buddypress, by default, has a nifty @function that allows you to look up users by username. As I understand it, bbpress works with this out of the box, in the reply boxes. However, when I enable TinyMCE using the tutorial above (https://codex.bbpress.org/enable-visual-editor/), Buddypress autocomplete goes away completely. We’d rather not have to choose between these two features, is there a way to restore autocomplete even with TinyMCE enabled?

Viewing 8 replies - 1 through 8 (of 8 total)
  • @ajoyce2016

    Participant

    I’ve found a function that enables autocomplete on any element of my choice. I’m reproducing it below:

    function buddydev_enable_mention_autosuggestions_on_compose( $load, $mentions_enabled ) {
    	if ( ! $mentions_enabled ) {
    		return $load; //activity mention is  not enabled, so no need to bother
    	}
    	//modify this condition to suit yours
    	if( is_user_logged_in() ) {
    		$load = true;
    	}
     
    	return $load;
    }
    add_filter( 'bp_activity_maybe_load_mentions_scripts', 'buddydev_enable_mention_autosuggestions_on_compose', 10, 2 );

    However, this only works with a textarea or input, I believe. TinyMCE, on the other hand, is an iframe with HTML elements generated on the fly. As such, when I try to initialize the function using the below:

    if ( jQuery( '#bbp_reply_content_ifr').get( 0 ) ) {
    		console.log('success');
    		jQuery('#bbp_reply_content_ifr').bp_mentions( bp.mentions.users );
    	}

    Nothing happens. What am I doing wrong? Buddypress supports the @mentions on TinyMCE instances (see here: https://buddypress.trac.wordpress.org/ticket/6972) and bbpress supports it in the plaintext editor. How can I enable it for the TinyMCE editor?

    @ajoyce2016

    Participant

    @atmojones

    Participant

    So mentions.min.js has this code

    bp.mentions.tinyMCEinit = function() {
    		if ( typeof window.tinyMCE === 'undefined' || window.tinyMCE.activeEditor === null || typeof window.tinyMCE.activeEditor === 'undefined' ) {
    			return;
    		} else {
    			$( window.tinyMCE.activeEditor.contentDocument.activeElement )
    				.atwho( 'setIframe', $( '.wp-editor-wrap iframe' )[0] )
    				.bp_mentions( bp.mentions.users );
    		}
    	};

    I think you’ll find that if you put an alert in a js file on forum page load that the if statement returns true. I guess it loads too early and tinyMCE isn’t initialized yet. Try loading in your functions.php a js file with this code:

    jQuery(document).ready(function($) {
    	
    	/* necessary to get @ mentions working in the tinyMCE on the forums */
    	window.onload = function() { 
    	      my_timing = setInterval(function(){myTimer();},1000);
    	      function myTimer() {
    	        if (typeof window.tinyMCE !== 'undefined' && window.tinyMCE.activeEditor !== null && typeof window.tinyMCE.activeEditor !== 'undefined') {  
    		        $( window.tinyMCE.activeEditor.contentDocument.activeElement )
    					.atwho( 'setIframe', $( '.wp-editor-wrap iframe' )[0] )
    					.bp_mentions( bp.mentions.users );
    				 window.clearInterval(my_timing);
    		    }
    	      }
    	      myTimer();
    	};
    })

    I don’t remember where I found this code, but it’s not mine, it just took a long time to find. I think just adding this will work but if it doesn’t get back to me and we’ll work this out

    @cjerrells

    Participant

    Thanks @atmojones, that worked for me!

    @slomeli79

    Participant

    @atmojones, thanks! Worked for me, too.

    @jameshogan03

    Participant

    @atmojones @slomeli79 @cjerrells

    Can one of you give me a bit more instruction on where and how to enter this code? I get a syntax error when checking this code…

    A little help would be hugely appreciated!

    @chenryahts

    Participant

    This must be BuddyPress core now?

    I’m getting the tag <span class=”atwho-query”> auto-added to the last email address in a BuddyPress message. It didn’t tag anyone as a user, it just added this class automatically.

    Is there anyway to stop this behavior?

    @robin-w

    Moderator

    probably better in buddypress support

    https://buddypress.org/support/

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.
Skip to toolbar