Skip to:
Content
Pages
Categories
Search
Top
Bottom

tinymce post-form missing “post update” button


  • phucitol
    Participant

    @phucitol

    Hello,

    I created a custom form-post.php so I could use wp_editor to customize the tinymce buttons I wanted to show. This is my code for that:

    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' => 'description',
                     'quicktags' => false,
                     'editor_class' => 'bp-suggestions',
                     'media_buttons' => false,
                     'teeny' => false,
                     'textarea_rows' => 5,
                     'tinymce'=> array(
                     'toolbar1'=> 'bold,italic,underline,strikethrough,forecolor',
                     'toolbar2' => 'bullist,numlist,link,unlink,undo,redo'
                           ));	
    	
    	// get the editor	
    	wp_editor( $content, $editor_id, $settings );
    }
    add_action( 'whats_new_textarea', 'bpfr_whats_new_tiny_editor' );
    		<div id="whats-new-textarea">
    			<?php do_action( 'whats_new_textarea' ); ?>
    		</div>

    My issue is that when I click in to the textarea (which is of course in an iframe) the “post update” button does not appear as it normally should. Suggestions?

Viewing 10 replies - 1 through 10 (of 10 total)

  • danbp
    Moderator

    @danbp


    phucitol
    Participant

    @phucitol

    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?


    danbp
    Moderator

    @danbp

    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.


    phucitol
    Participant

    @phucitol

    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?


    danbp
    Moderator

    @danbp

    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.


    phucitol
    Participant

    @phucitol

    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.


    danbp
    Moderator

    @danbp


    meebovn
    Participant

    @meebovn

    @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


    phucitol
    Participant

    @phucitol

    @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;
    	});
    })

    fastrix
    Participant

    @fastrix

    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

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