Thanks so much for your response. I reread that post (which is what I based my code on) and I do realize I made some changes. For example removing:
// deactivation of the visual tab, so user can't play with template styles
add_filter ( 'user_can_richedit' , create_function ( '$a' , 'return false;' ) , 50 );
and using:
'tinymce'=> array(
'toolbar1'=> 'bold,italic,underline,strikethrough,forecolor',
'toolbar2' => 'bullist,numlist,link,unlink,undo,redo'
)
instead of
'quicktags' => array(
'buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close')
Without those changes I can’t get the rich text editor that I require. Did you mean by “It’s explained here” that making the visual editor work in this context is not possible?
It is possible and that’s what i explained on both topics i indicated.
By default BP use only a textarea. You can add a WYSIWIG editor by using that snippet.
All that is WP stuff and is explained on WP’s codex.
user_can_richedit
wp_editor
Check you have correctly added anything to your custom page and if the button is still missing, check first the page source code from within your browser. If you find it in code but don’t see it on screen, there may be a css rule who hide it.
Thanks so much for your quick responses. I’m not explaining myself well I guess.
I want my users to only see and use the visual editor. I know that the button to submit is on the page. I know it is being hidden by javascript on page load. I know that it normally becomes visible when clicking in the textarea. The text area in the visual editor, located in an iframe, doesn’t register the events that make the submit button visible.
Do you know if it is possible to get the buddypress javascript that handles the buttons visibility to work with the text area in the iframe?
Alternatively, would it be possible for me to write custom buttons and add them to the default BP textarea?
Compare source code of the textarea on activities (which use original BP JS) and compare with the source of the custom textarea. The first thing you may notice on the original, is that there is no iframe.
The second is that you have some tinymce related divs which aren’t handled by what’s new JS – that’s why the visual tab doesn’t recognize formatted text and why there is the filter to diable that tab.
To show the buton and the missing selector, it’s a simple CSS adjustment to declare.
Add this to your child theme style.css
#whats-new-options{
clear:both!important;
}
Works at least on 2016.
If you absolutely want the visual tab to work, you have to write some additionnal JS, so it can recognize the custom area tools. I’ve never done that and i’m unable to help you with this.
Thanks again for your prompt and detailed answer.
In the end I had to remove some event handlers
$('#whats-new').off("focus");
$('#whats-new-form').off("focusout");
$('#whats-new-options').show();
$('#aw-whats-new-submit').off('click');
then I modified my own version of the $('#aw-whats-new-submit').on('click');
handler and no changes to the css were required (other than removing what the event handlers were changing).
I’m still having some issues with some styling tags added by the visual editor being stripped on submission, but that seems off topic for this thread.
@phucitol: Can you give me a code about $('#aw-whats-new-submit').on('click');
?
I can’t post when I click ‘Post Update’, it say I must enter a content to post
@meebovn Just saw your post. Here is the code I was using. I just load it from it’s own JS file in my functions.php. IIRC most of it is copy-pasta from a buddypress file with w/e tweaking I needed to get it working. It’s not pretty though.
jQuery(document).ready(function($) {
/* necessary to get the custom post-form working */
//Deregister buddypress built in actions
$('#whats-new').off("focus");
$('#whats-new-form').off("focusout");
$('#whats-new-options').show();
$('#aw-whats-new-submit').off('click');
/* New posts */
$('#aw-whats-new-submit').on( 'click', function() {
var editor = tinymce.get('whats-new');
editor.save();
var last_date_recorded = 0,
button = $(this),
form = button.closest('form#whats-new-form'),
inputs = {}, post_data;
// Get all inputs and organize them into an object {name: value}
$.each( form.serializeArray(), function( key, input ) {
// Only include public extra data
if ( '_' !== input.name.substr( 0, 1 ) && 'whats-new' !== input.name.substr( 0, 9 ) ) {
if ( ! inputs[ input.name ] ) {
inputs[ input.name ] = input.value;
} else {
// Checkboxes/dropdown list can have multiple selected value
if ( ! $.isArray( inputs[ input.name ] ) ) {
inputs[ input.name ] = new Array( inputs[ input.name ], input.value );
} else {
inputs[ input.name ].push( input.value );
}
}
}
} );
form.find( '*' ).each( function() {
if ( $.nodeName( this, 'textarea' ) || $.nodeName( this, 'input' ) ) {
$(this).prop( 'disabled', true );
}
} );
/* Remove any errors */
$('div.error').remove();
button.addClass('loading');
button.prop('disabled', true);
form.addClass('submitted');
/* Default POST values */
object = '';
item_id = $('#whats-new-post-in').val();
content = $('#whats-new').val();
firstrow = $( '#buddypress ul.activity-list li' ).first();
activity_row = firstrow;
timestamp = null;
// Checks if at least one activity exists
if ( firstrow.length ) {
if ( activity_row.hasClass( 'load-newest' ) ) {
activity_row = firstrow.next();
}
timestamp = activity_row.prop( 'class' ).match( /date-recorded-([0-9]+)/ );
}
if ( timestamp ) {
last_date_recorded = timestamp[1];
}
/* Set object for non-profile posts */
if ( item_id > 0 ) {
object = $('#whats-new-post-object').val();
}
post_data = $.extend( {
action: 'post_update',
'cookie': bp_get_cookies(),
'_wpnonce_post_update': $('#_wpnonce_post_update').val(),
'content': content,
'object': object,
'item_id': item_id,
'since': last_date_recorded,
'_bp_as_nonce': $('#_bp_as_nonce').val() || ''
}, inputs );
$.post( ajaxurl, post_data, function( response ) {
form.find( '*' ).each( function() {
if ( $.nodeName( this, 'textarea' ) || $.nodeName( this, 'input' ) ) {
$(this).prop( 'disabled', false );
}
});
/* Check for errors and append if found. */
if ( response[0] + response[1] === '-1' ) {
form.prepend( response.substr( 2, response.length ) );
$( '#' + form.attr('id') + ' div.error').hide().fadeIn( 200 );
} else {
if ( 0 === $('ul.activity-list').length ) {
$('div.error').slideUp(100).remove();
$('#message').slideUp(100).remove();
$('div.activity').append( '<ul id="activity-stream" class="activity-list item-list">' );
}
if ( firstrow.hasClass( 'load-newest' ) ) {
firstrow.remove();
}
$('#activity-stream').prepend(response);
if ( ! last_date_recorded ) {
$('#activity-stream li:first').addClass('new-update just-posted');
}
if ( 0 !== $('#latest-update').length ) {
var l = $('#activity-stream li.new-update .activity-content .activity-inner p').html(),
v = $('#activity-stream li.new-update .activity-content .activity-header p a.view').attr('href'),
ltext = $('#activity-stream li.new-update .activity-content .activity-inner p').text(),
u = '';
if ( ltext !== '' ) {
u = l + ' ';
}
u += '<a href="' + v + '" rel="nofollow">' + BP_DTheme.view + '</a>';
$('#latest-update').slideUp(300,function(){
$('#latest-update').html( u );
$('#latest-update').slideDown(300);
});
}
$('li.new-update').hide().slideDown( 300 );
$('li.new-update').removeClass( 'new-update' );
$('#whats-new').val('');
form.get(0).reset();
// reset vars to get newest activities
newest_activities = '';
activity_last_recorded = 0;
}
//$('#whats-new-options').slideUp();
$('#whats-new-form textarea').animate({
height:'2.2em'
});
$('#aw-whats-new-submit').removeClass('loading');
$( '#whats-new-content' ).removeClass( 'active' );
});
return false;
});
})
I am also lost in this topic. I can not get it to work “must enter a content to post”. @phucitol can you point me on how to do it? Also lot of thanks to @danbp