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 7 replies - 26 through 32 (of 32 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

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