Skip to:
Content
Pages
Categories
Search
Top
Bottom

@mention autosuggest in visual editor


  • OakCreative
    Participant

    @oakcreative

    Hello,

    I am using WordPress’ WYSIWYG editor to enhance the What’s New textarea. That’s all working fine, however, the new autosuggest @mention only seems to work in the text editor.

    Is there a way to get it working within the visual editor?

    Using WordPress v4.2.2 and BuddyPress v2.2.3.1.

Viewing 9 replies - 26 through 34 (of 34 total)

  • gatelli
    Participant

    @gatelli

    I could make it working replacing with .wp-editor-wrap iframe, but ALSO removing the if ( ‘content’ === $editor_id ) in bp-activity-cssjs.php file who was allowing the init only in wp dashboard.
    I guess it’s not a problem to do that ?

    The change reported in https://buddypress.trac.wordpress.org/ticket/6972 has been added to BuddyPress trunk, and will be included in BP 2.6.

    https://buddypress.trac.wordpress.org/changeset/10747


    phucitol
    Participant

    @phucitol

    I’m trying to get @ mentions to work as well and I’ve very nearly done it.
    I created a custom post-form.php that calls do_action on this function in my bp-custom.php file:

    function bpfr_whats_new_tiny_editor() {
    	// building the what's new textarea
    	if ( isset( $_GET['r'] ) ) :
    	$content = esc_textarea( $_GET['r'] ); 
    	endif;
    
    	// adding tinymce tools
    	$editor_id = 'whats-new';
    		$settings = array(
                     'textarea_name' => 'whats-new',
                    );	
    	
    	// get the editor	
    	wp_editor( $content, $editor_id, $settings );
    }
    add_action( 'whats_new_textarea', 'bpfr_whats_new_tiny_editor' );

    But it wasn’t working, so I looked in mentions.js and found

    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 added some jQuery alerts to my document ready code to check typeof window.tinyMCE === 'undefined' || window.tinyMCE.activeEditor === null || typeof window.tinyMCE.activeEditor === 'undefined' and it seems like this code is running before tinyMCE is fully loaded because window.tinyMCE.activeEditor === null comes back as true. To double check I made a button on my page that, when clicked, calls:

    $( window.tinyMCE.activeEditor.contentDocument.activeElement )
    .atwho( 'setIframe', $( '.wp-editor-wrap iframe' )[0] )
    .bp_mentions( bp.mentions.users );

    and after that the mentions work in tinyMCE. Can anyone point me in the right direction on this? Is there a way that I can make my own javascript file and enqueue it after tinyMCE is loaded so I can get this working?


    r-a-y
    Keymaster

    @r-a-y

    Ran into this issue recently regarding getting TinyMCE to work on BP group forum pages.

    The following code fixes this:

    /**
     * Enable at-mention autocomplete on BuddyPress group forum textareas.
     */
    function my_enable_mentions_in_group_forum_textareas( $retval ) {
    	$bbpress = false;
    
    	// Group forum reply.
    	if ( bp_is_group() && 'topic' === bp_action_variable() && bp_action_variable( 1 ) ) {
    		$bbpress = true;
    	}
    
    	// Group forum topic.
    	if ( bp_is_group() && bp_is_current_action( 'forum' ) ) {
    		$bbpress = true;
    	}
    
    	// Do stuff when on a group forum page.
    	if ( true === $bbpress ) {
    		$retval = true;
    		
    		// Ensure at-mentions autocomplete works with TinyMCE for bbPress.
    		add_filter( 'tiny_mce_before_init', 'cac_enable_mentions_in_group_forum_tinymce', 10, 2 );
    	}
    
    	return $retval;
    }
    add_filter( 'bp_activity_maybe_load_mentions_scripts', 'my_enable_mentions_in_group_forum_textareas' );
    
    /**
     * Ensure at-mentions autocomplete works with TinyMCE for bbPress.
     *
     * @param array  $settings   An array with TinyMCE config.
     * @param string $editor_id Unique editor identifier, e.g. 'content'.
     * @return array  $mceInit   An array with TinyMCE config.
     */
    function my_enable_mentions_in_group_forum_tinymce( $settings, $editor_id ) {
    	// Add bbPress' editor IDs to enable BP mention autocomplete.
    	if ( 'bbp_topic_content' === $editor_id || 'bbp_reply_content' === $editor_id ) {
    		$settings['init_instance_callback'] = 'window.bp.mentions.tinyMCEinit';
    	}
    
    	return $settings;
    }

    phucitol
    Participant

    @phucitol

    @r-a-y

    Thanks for the code. I had gotten this working by adding this really gross javascript:

    	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();
    	};

    ONE question. Shouldn’t this line of code:
    add_filter( 'tiny_mce_before_init', 'cac_enable_mentions_in_group_forum_tinymce', 10, 2 );

    be

    add_filter( 'tiny_mce_before_init', 'my_enable_mentions_in_group_forum_tinymce', 10, 2 );
    ?


    Robin W
    Participant

    @robin-w

    @r-a-y

    I know this is an old thread, but I can’t get your excellent code working for tinymce on topic/reply front end.

    Works fine in tinymce on backend, Works fine for textarea on front end, but not timymce on front end. I need it working on frontend in forums.

    Is there a more up to date version that works with current bp and bbp, or do you have any ideas how to get it working.

    the code I am using is

    /**
     * Enable at-mention autocomplete on BuddyPress group forum textareas.
     */
    function my_enable_mentions_in_group_forum_textareas( $retval ) {
    	$bbpress = false;
    
    	// Group forum reply.
    	if ( bp_is_group() && 'topic' === bp_action_variable() && bp_action_variable( 1 ) ) {
    		$bbpress = true;
    	}
    
    	// Group forum topic.
    	if ( bp_is_group() && bp_is_current_action( 'forum' ) ) {
    		$bbpress = true;
    	}
    
    	// Do stuff when on a group forum page.
    	if ( true === $bbpress ) {
    		$retval = true;
    		
    		// Ensure at-mentions autocomplete works with TinyMCE for bbPress.
    		add_filter( 'tiny_mce_before_init', 'cac_enable_mentions_in_group_forum_tinymce', 10, 2 );
    	}
    
    	return $retval;
    }
    add_filter( 'bp_activity_maybe_load_mentions_scripts', 'my_enable_mentions_in_group_forum_textareas' );
    
    /**
     * Ensure at-mentions autocomplete works with TinyMCE for bbPress.
     *
     * @param array  $settings   An array with TinyMCE config.
     * @param string $editor_id Unique editor identifier, e.g. 'content'.
     * @return array  $mceInit   An array with TinyMCE config.
     */
    function cac_enable_mentions_in_group_forum_tinymce( $settings, $editor_id ) {
    	// Add bbPress' editor IDs to enable BP mention autocomplete.
    	if ( 'bbp_topic_content' === $editor_id || 'bbp_reply_content' === $editor_id ) {
    		$settings['init_instance_callback'] = 'window.bp.mentions.tinyMCEinit';
    	}
    
    	return $settings;
    }

    Robin W
    Participant

    @robin-w

    After kicking this around, I found that

    add_filter( ‘tiny_mce_before_init’, ‘cac_enable_mentions_in_group_forum_tinymce’, 10, 2 );

    is never fired, presume this is an order thing.

    After some further research, I created a small plugin that has some much of the above, but also some js that executes for the visual version.

    available at

    bbp Mentions Suggest


    Back to Front
    Participant

    @traverser11

    Hey thanks @robin-w 🙏

    Just wanted to confirm that your plugin linked above does works, out of the box, in the Visual editor box, and also in bbpress forums as well as in buddypress.

    Nice!


    Robin W
    Participant

    @robin-w

    Great 🙂

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