[OakCreative]

@gatelli, I believe BuddyPress enqueues the minified version of mentions.js, so your changes will not apply. You need to de-register their version and enqueue your own modified one.

[OakCreative]

That’s great news @djpaul, thank you very much!

[OakCreative]

@benworxnl, our wp_editor() call is exactly as posted above, so I’m not really sure why it isn’t working for you or why the visual tab isn’t showing.

I am running the latest versions of both WordPress and BuddyPress, perhaps that’s the difference?

[OakCreative]

That would be great @djpaul! Sorry, I would contribute myself but haven’t had the time.

I can confirm that changing #content_ifr to .wp-editor-wrap iframe worked for us. As far as I can tell, it would work for any wp_editor() instance, whether front or back-end.

[OakCreative]

@oliver_rub, our current solution involves deregistering the BuddyPress mentions script and enqueuing our own slightly modified version with a more generic jQuery selector. I think @slaffik has found the best solution though, I’m going to try it.

@benworxnl, no we had a slightly different scenario. We transformed the “What’s New” textarea into a WYSIWYG editor and the visual tab worked on that straight away. The issue we had was getting the mentions to work on that visual editor.

Anyway, we duplicated and edited the activity/post-form.php template and replaced the textarea with wp_editor;

wp_editor(
	isset( $_GET['r'] ) ? '@' . esc_attr( $_GET['r'] ) : '',
	'whats-new',
	array(
		'textarea_name' => 'whats-new',
		'editor_class'  => 'whats-new-mce',
		'editor_height' => 200,
		'tinymce' => array(
			'toolbar1' => 'bold,italic,underline,|,blockquote,|,bullist,numlist,|,link,unlink,|,spellchecker,|,undo,redo',
			'toolbar2' => ''
		)
	)
);

For activity replies, you could do something similar to this in activity/entry.php;

wp_editor(
	isset( $_GET['r'] ) ? '@' . esc_attr( $_GET['r'] ) : '',
	'ac-input-' . bp_activity_id(),
	array(
		'textarea_name' => 'ac_input_' . bp_activity_id(),
		'editor_class'  => 'ac-input',
		'editor_height' => 200,
		'tinymce' => array(
			'toolbar1' => 'bold,italic,underline,|,blockquote,|,bullist,numlist,|,link,unlink,|,spellchecker,|,undo,redo',
			'toolbar2' => ''
		)
	)
);

Please note, I’ve not tested the above.

[OakCreative]

After more digging around, I’ve realised that it does work for the visual editor, but only if the TinyMCE iframe has an ID of content_ifr (as per the WordPress dashboard).

By changing the $editor_id argument in wp_editor() to 'content', everything works. I would have to change the markup for my website though as I am already using #content for another element.

This means the autosuggest function can only be used on one visual editor at a time in the front-end and relies on a specific ID. However, changing the jQuery selector in mentions.js to '.wp-editor-wrap iframe' seems to work and allow for multiple instances.

Obviously editing core files isn’t ideal though, so this isn’t a real solution.

[OakCreative]

After some digging around, it does seem like the support is there for the visual editor, but I keep getting the following JavaScript error when attempting to @mention: “Uncaught TypeError: Cannot read property ‘slice’ of undefined”