@mention autosuggest in visual editor
-
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.
-
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.
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 becausewindow.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?
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; }
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 );
?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; }
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
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!
Great 🙂
- You must be logged in to reply to this topic.