@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.
-
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”
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.
I´m currently working on the same problem; Making the @mentions work in the visual tab. But i try to achieve this within bbPress as well.
Any idea what files to change there? I´m struggling a little bit to find the lines you mentioned above.edit: Did you come up with a more elegant solution in the mean time?
to get @mention in bbpress topics, try this snippet
https://buddypress.org/support/topic/mention-autolink-to-profile/#post-237202@danbp
Thanks for your suggestion Dan.
I already tried that. There are two problems with that snippent. The first being that the is_bbpress() is returning false when i access bbpress forums in a buddypress group (theme: firmasite). Thats easy to solve through eliminating that check.
The second problem is that currently the @mentions system isn’t working for the visual tab in tinyMCE, it works only for the text tab. Also discussed briefly between Paul Gibbs and Unsal Korkmaz here: https://buddypress.org/support/topic/buddypress-2-1-patsy/ (see comments)One of the requirements for our platform is that users can use those fancy buttons in the visual tab, but having the mentions autocomplete only in the text tab is a little bit ..you know…unexpected for users 😉
Thus i hoped i can somehow manage to reproduce the approach of OakCreative, but I havent been successful.
Maybe also updating the at.js is a way to go, but the jump from the used version (0.5.2) to the current (1.3.0) seems to be to big to work just with replacing the script.
So this is my current knowledge about this topic. Does anyone know how to proceed? Or should i create a ticket for this, so that the devs can have a look into this in future releases? I havent found any ticket dealing with exactly this.The text tab used for group forum is striped by bbpress filters and BP filters. And the visual editor is set to off by default since bbp 2.3
If you need visual tab with some tinyMCE buttons, read here, maybe you can arrange this to your need ?@danbp
Sorry for not writing that earlier. It seems that I need to work on my problem description skills. I enabled the visual tab already through an addon called bbpress-enable-tinymce-visual-tab, but since I used that for quite some time I forgot that the visual tab is switched off by default.
So my setting is: I have BuddyPress groups, with bbPress forums. I have the visual tab enabled (easier to use for non-techi persons). I have the @mentions feature enabled, but it only works in the text tab (the ‘quicktags’ argument on the bbPress link you gave me). So what I want is now somehow enable the @mentions feature also for the visual tab.
I thought that @oakcreative has a similar approach, thats why I joined the thread. But I´m not sure how to replicate his approach with bbPress…all i could say is that is an old request, even if confidential.
See this ticket opened 4 years ago
and this bbpress ticket kicked to 2.7 as idea. And why not 6.0 ? 😉Supposing that if more people would ask, it will be resolved faster.
Aside, the gist given by imath need to be completed to work with BP 2.3.2.1 on text Tab (only) by adding
bp_is_group
toif ( function_exists( 'bbpress' ) && is_bbpress() || bp_is_group() )
And to enable visual editor, no need of a plugin. See here.
Would you be willing to share with us how you enabled the WYSIWYG editor for Buddypress Groups.
We only seem to be able to get the rich text editor working which you can find right here in the comments section.
Many thanx!
@benworxnl sure, I use the bbPress Enable TinyMCE Visual Tab plugin (https://wordpress.org/plugins/bbpress-enable-tinymce-visual-tab/) which is pretty much just the same as what is suggested by bbPress (see the post of danbp above).
Thanx @oliver_rub!
I now see that you added this composer to bbPress inside BuddyPress groups 🙂
We would like it to work on the activity stream, so even without having to install bbPress. Sorry for not reading more careful in an earlier stage..
@oakcreative, were you able to get the WYSIWYG visual composer working in the BuddyPress activity stream without installing bbPress?Thanx peepz!
Here is one more solution: http://buddydev.com/buddypress/enabling-buddypress-mention-auto-suggestions-on-any-page/
@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 withwp_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.
@bhagwantmann
This is very good and helpful many times i suffered from this problem, I appreciate your ideaThanks
@oakcreative
we edited the activity/post-form.php template and replaced the textarea with wp_editor, but its not work for me. but if i add action in plugin/bp-custom.phpadd_action( 'whats_new_textarea', 'bpfr_whats_new_tiny_editor' );
in that function put the wp_editor(i.e your code mention above ) then it works but not show the visual editor.
Can you please share your code or that activity/post-form.php file so i can edit as per your guideline. or give me the inputs so i can change the text editor to WYSWYG editor
Thanks@oakcreative I know this is an old thread, but we (BuddyPress) could change out the
#content_ifr
selector for something less specific if that’s what you found you needed to do. Can you confirm?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 anywp_editor()
instance, whether front or back-end.@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?
Thanks @oakcreative! I’ve created a ticket in https://buddypress.trac.wordpress.org/ticket/6972 and as it’s such a trivial change, I’m pretty certain it’ll get done for the next BuddyPress release (2.6, a few months away).
That’s great news @djpaul, thank you very much!
Hi, I have tinymce enabled in activity, and also in BP forum topics. Mentions work well in text mode, but not in visual mode. I did replace in mentions.js line 251 ‘#content_ifr’ by ‘.wp-editor-wrap iframe’ but it’s not working.
Did I missed something please ?
Thanks.
G.@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.
thanks @OakCreative, how can I do that ?
Is the following code in my bp-custom.php is ok ?
wp_deregister_script(‘mentions’);
wp_register_script(‘mentions’, ‘https://my-new-file-mentions.js’, false, null);
wp_enqueue_script(‘mentions’);I tried with a working code to deregister and register my code, but not working in visual editor…
@OakCreative : actually, I use BuddyPress Forum Editor plugin, I think it’s why it doesn’t work. Would you accept to take a look on this, to find what I have to put in iframe in mention.js instead of “.wp-editor-wrap iframe” ?
Many thanks…
- You must be logged in to reply to this topic.