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 25 replies - 1 through 25 (of 32 total)

  • OakCreative
    Participant

    @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”


    OakCreative
    Participant

    @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.


    oliver_rub
    Participant

    @oliver_rub

    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?


    danbp
    Moderator

    @danbp


    oliver_rub
    Participant

    @oliver_rub

    @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.


    danbp
    Moderator

    @danbp

    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 ?

    Enable Visual Editor


    oliver_rub
    Participant

    @oliver_rub

    @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…


    danbp
    Moderator

    @danbp

    @oliver_rub,

    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 to if ( function_exists( 'bbpress' ) && is_bbpress() || bp_is_group() )

    And to enable visual editor, no need of a plugin. See here.


    BenWorx.nl
    Participant

    @benworxnl

    @oliver_rub

    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!


    oliver_rub
    Participant

    @oliver_rub

    @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).


    BenWorx.nl
    Participant

    @benworxnl

    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!


    OakCreative
    Participant

    @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.


    vohraraghu
    Participant

    @vohraraghu

    @bhagwantmann
    This is very good and helpful many times i suffered from this problem, I appreciate your idea

    Thanks


    BenWorx.nl
    Participant

    @benworxnl

    @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.php add_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?


    OakCreative
    Participant

    @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
    Participant

    @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?

    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).


    OakCreative
    Participant

    @oakcreative

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


    gatelli
    Participant

    @gatelli

    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.


    OakCreative
    Participant

    @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.


    gatelli
    Participant

    @gatelli

    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’);


    gatelli
    Participant

    @gatelli

    I tried with a working code to deregister and register my code, but not working in visual editor…


    gatelli
    Participant

    @gatelli

    @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…

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