• Hello! Hope you can help me here with this, I have been already struggling quite a long time.

    My main problem is that, using your visual editor, my customers are not able to paste their lines of code keeping the original indentation . For some reason tinyMCE removes nbsp, the non-breaking space entity .

    First of all I am using this plugin mainly to provide my customers a visual editor in our BBPress Forum.

    I needed to configure my tinyMCE to be able to include a custom button that I created to paste code. Additionally, I realized that this tinyMCE didn’t keep properly the format of the posts after pressing the “edit button”, so I made the folling configuration:

    /*
     * my_format_TinyMCE
     *
     * Enable custom CSS for tinyMCE
     *
     */
    function my_format_TinyMCE( $in ) {
    	$in['content_css'] = home_url() . "/wp-content/themes/tisson-child/tinyMCE-editor-style.css";
    	return $in;
    }
    add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
    /*
     * bbp_enable_visual_editor
     *
     * Enable plugins for tinyMCE and custom settings
     */
    function bbp_enable_visual_editor( $args = array() ) {
        $args['tinymce'] = true;
        // $args['quicktags'] = false;
        $args['teeny'] = false;
    
        return $args;
    }
    add_filter( 'bbp_after_get_the_content_parse_args', 'bbp_enable_visual_editor' );
    /*
     * Creating Custom CODE button for tinyMCE
     *
     * It will insert back-quotes that bbpress and crayon-highlighter will
     * understand as code
     */
    add_action( 'init', 'wptuts_buttons' );
    function wptuts_buttons() {
        add_filter( "mce_external_plugins", "wptuts_add_buttons" );
        add_filter( 'mce_buttons', 'wptuts_register_buttons' );
    }
    function wptuts_add_buttons( $plugin_array ) {
        $plugin_array['wptuts'] = home_url() . '/wp-content/themes/tisson-child/wptuts-editor-buttons/wptuts-plugin.js';
        return $plugin_array;
    }
    function wptuts_register_buttons( $buttons ) {
        array_push( $buttons, 'dropcap', 'showrecent' ); // dropcap', 'recentposts
        return $buttons;
    }

    My custom button just adds back quotes to the selected text to format it afterwards, nothing interfering with my plugin.

    I figured out that removing the line $args['teeny'] = false; from my above code fixes this problem, but then I am facing a tinyMCE that breaks after pressing edit post and that doesn’t allow me to add custom buttons.

    Any idea here? 🙂

    https://wordpress.org/plugins/tinymce-advanced/

Viewing 12 replies - 1 through 12 (of 12 total)
  • Plugin Author Andrew Ozz

    (@azaozz)

    TinyMCE does not remove non-breaking spaces, It converts them from entity to UTF-8 character. This is something set in WordPress by default, can be changed but there will probably be unexpected consequences/edge cases.

    For the rest, best is to find a plugin that does something similar and have a look at the code. The power of open source! 🙂

    Thread Starter begona.alvarezd

    (@begonaalvarezd)

    Thank you very much for your response Andrew.

    If I may ask you, I would like to understand what is going on exactly and maybe try to fix it my myself, but I dont have the time to study in deep your entire code.

    As I posted above

    I figured out that removing the line $args['teeny'] = false; from my above code fixes this problem

    . How is it possible that deactivating this “tiny tinyMCE” then I loose all my indentation?

    The behavior is as follows:

    Original Code:

    if ( typeof window.tadvTranslation === 'object' ) {
    		$( '.tadvitem' ).each( function( i, element ) {
    			var $element = $( element ),
    				$descr = $element.find( '.descr' ),
    				text = $descr.text();
    
    			if ( text ) {
    				text = translate( text );
    				$descr.text( text );
    				$element.find( '.mce-ico' ).attr( 'title', text );
    			}
    		});
    
    		$( '#tadv-mce-menu .tadv-translate' ).each( function( i, element ) {
    			var $element = $( element ),
    				text = $element.text();
    
    			if ( text ) {
    				$element.text( translate( text ) );
    			}
    		});
    	}

    Pasting code in tinymCE visual editor with $args['teeny'] = false;

    if ( typeof window.tadvTranslation === 'object' ) {
    $( '.tadvitem' ).each( function( i, element ) {
    var $element = $( element ),
    $descr = $element.find( '.descr' ),
    text = $descr.text();
    
    if ( text ) {
    text = translate( text );
    $descr.text( text );
    $element.find( '.mce-ico' ).attr( 'title', text );
    }
    });
    
    $( '#tadv-mce-menu .tadv-translate' ).each( function( i, element ) {
    var $element = $( element ),
    text = $element.text();
    
    if ( text ) {
    $element.text( translate( text ) );
    }
    });
    }

    Pasting code in tinymCE visual editor without $args['teeny'] = false;

    if ( typeof window.tadvTranslation === 'object' ) {
    
    		$( '.tadvitem' ).each( function( i, element ) {
    
    			var $element = $( element ),
    
    				$descr = $element.find( '.descr' ),
    
    				text = $descr.text();
    
    			if ( text ) {
    
    				text = translate( text );
    
    				$descr.text( text );
    
    				$element.find( '.mce-ico' ).attr( 'title', text );
    
    			}
    
    		});
    
    		$( '#tadv-mce-menu .tadv-translate' ).each( function( i, element ) {
    
    			var $element = $( element ),
    
    				text = $element.text();
    
    			if ( text ) {
    
    				$element.text( translate( text ) );
    
    			}
    
    		});
    
    	}

    There is really something happening that escapes from my knowledge.

    Plugin Author Andrew Ozz

    (@azaozz)

    $args['teeny'] is false by default. Maybe there is another plugin that sets it to true?

    When 'teeny' is enabled, the default plugins and buttons are different. Also no external plugins are loaded.

    Best way to keep pasted code properly formatted is to use one of the syntax highlighting plugins. If not, code should always be pasted in a <pre> tag.

    Thread Starter begona.alvarezd

    (@begonaalvarezd)

    I am already using a plugin to highlight code.
    I am currently using Crayon Syntax Highlighter. It is a real pity because I managed to have everything working so super nice but this problem pasting indentation can be a nightmare…since our forum is mainly to solve software issues.

    I don’t understand why this is happening and how is possible that activating tenny leads to a correct pasting action.

    Plugin Author Andrew Ozz

    (@azaozz)

    Changing $args['teeny'] changes the TinyMCE settings and which filters are run. For more info see:
    https://core.trac.wordpress.org/browser/tags/4.3/src/wp-includes/class-wp-editor.php#L55
    https://core.trac.wordpress.org/browser/tags/4.3/src/wp-includes/class-wp-editor.php#L357
    https://core.trac.wordpress.org/browser/tags/4.3/src/wp-includes/class-wp-editor.php#L584
    https://core.trac.wordpress.org/browser/tags/4.3/src/wp-includes/class-wp-editor.php#L702

    My guess is that one of your plugins is using some of these filters to alter the TinyMCE settings/behaviour. Also: teeny is false by default, search through your plugins to find out which sets it to true and why.

    Thread Starter begona.alvarezd

    (@begonaalvarezd)

    I am using your plugin mainly for BBPress Forum and I just realized that is BBPress who is setting teeny to true.

    function bbp_get_the_content( $args = array() ) {
    
    		// Parse arguments against default values
    		$r = bbp_parse_args( $args, array(
    			'context'           => 'topic',
    			'before'            => '<div class="bbp-the-content-wrapper">',
    			'after'             => '</div>',
    			'wpautop'           => true,
    			'media_buttons'     => false,
    			'textarea_rows'     => '12',
    			'tabindex'          => bbp_get_tab_index(),
    			'tabfocus_elements' => 'bbp_topic_title,bbp_topic_tags',
    			'editor_class'      => 'bbp-the-content',
    			'tinymce'           => false,
    			'teeny'             => true,
    			'quicktags'         => true,
    			'dfw'               => false
    		), 'get_the_content' );
    ......etc

    This code is in bbpress/includes/common/template.php

    Some idea then how to force tinyMCE to preserve my indentations? I’ve tried several configurations and none of them successful 🙁

    I need teeny to be false since I have custom buttons and they dont appear if teeny is true. And on the other hand I miss indentations when teeny is set to false. Is there some configuration that I am missing to force tinyMCE to keep formatted text?

    Thank you very much for your help!

    Thread Starter begona.alvarezd

    (@begonaalvarezd)

    You also suggested:

    Best way to keep pasted code properly formatted is to use one of the syntax highlighting plugins

    I am using Crayon Syntax Highlighter already, but it looks like it has no effect in the way of pasting and formatting indentations. It just highlights code. Any idea or advised plugin?

    PS: still would be better to find some configuration I could add like:

    function my_format_TinyMCE( $in ) {
    	$in['content_css'] = home_url() . "/wp-content/themes/tisson-child/tinyMCE-editor-style.css";
    	$in['entity_encoding'] = "named"; //something like this but working!!
    	return $in;
    }
    add_filter( 'tiny_mce_before_init', 'my_format_TinyMCE' );
    Plugin Author Andrew Ozz

    (@azaozz)

    I need teeny to be false since I have custom buttons and they dont appear if teeny is true. And on the other hand I miss indentations when teeny is set to false.

    Sounds like this is coming from the syntax highlighting plugin. As far as I see it is already setting teeny to false: https://plugins.trac.wordpress.org/browser/crayon-syntax-highlighter/tags/2.7.0/util/tag-editor/crayon_tag_editor_wp.class.php#L111. Is there another plugin you’re using that may be setting it back to true? Also, does the syntax highlighting work properly in the “main” editor on the Edit Post screen in WP?

    Thread Starter begona.alvarezd

    (@begonaalvarezd)

    Hi Andrew, I wrote also in my post (see that there are two instead of just one, I wrote twice) :

    I am using your plugin mainly for BBPress Forum and I just realized that is BBPress who is setting teeny to true.

    I also attached the code that is actually doing it.

    Additionally, I already tested deactivating the syntax highlighter. It is inferring zero in the way of writing in the editor, syntax highlighter just works after pressing the button “submit” so the issue is not there.

    Is there some configuration that I am missing to force tinyMCE to keep formatted text? Some idea then how to force tinyMCE to preserve my indentations? I’ve tried several configurations and none of them successfully 🙁

    Plugin Author Andrew Ozz

    (@azaozz)

    Ah, maybe I’m misunderstanding the problem. What exactly do you mean by:

    …paste their lines of code keeping the original indentation

    I assumed you mean pasting example source code (C, JAVA, JS, PHP, etc.) in <pre> tags, but perhaps you were talking about pasted HTML source?

    If the later, there is no good way to preserve HTML white space (tabs, spaces, line breaks, etc.) in contentEditable. After you paste HTML “source” and switch to the Visual editor, it gets parsed into a DOM, that DOM is edited by the user, then on saving the DOM is serialized into HTML source (string) and the underlying textarea content is updated. The same happens when switching Visual => Text.

    There is no good way to keep white spaces during these conversions as in HTML they are ignored, except in a <pre> tag.

    Thread Starter begona.alvarezd

    (@begonaalvarezd)

    What I would like to explain is the situation when you or me or anybody take a piece of code from: sublime text or eclipse or notepad++ or any code editor…and paste it in the visual editor of tinyMCE.

    In a normal plain text area, like this forum for example, If I copy and paste part of my code here it looks like this:

    function woo_add_custom_general_fields_save( $post_id ){
    
    	// Text Field subtitle
    	$woocommerce_subtitle_field = $_POST['_subtitle_field'];
    	if( !empty( $woocommerce_subtitle_field ) )
    		update_post_meta( $post_id, '_subtitle_field', esc_attr( $woocommerce_subtitle_field ) );
    
    	// Text Field Documentation url
    	$woocommerce_subtitle_field = $_POST['_documentation_url'];
    	if( !empty( $woocommerce_subtitle_field ) )
    		update_post_meta( $post_id, '_documentation_url', esc_attr( $woocommerce_subtitle_field ) );
    
    }

    But doing it in the visual editor of TinyMCE Advanced has the following result:

    function woo_add_custom_general_fields_save( $post_id ){
    
    // Text Field subtitle
    $woocommerce_subtitle_field = $_POST['_subtitle_field'];
    if( !empty( $woocommerce_subtitle_field ) )
    update_post_meta( $post_id, '_subtitle_field', esc_attr( $woocommerce_subtitle_field ) );
    
    // Text Field Documentation url
    $woocommerce_subtitle_field = $_POST['_documentation_url'];
    if( !empty( $woocommerce_subtitle_field ) )
    update_post_meta( $post_id, '_documentation_url', esc_attr( $woocommerce_subtitle_field ) );
    
    }

    As you can see the white spaces at the beginning of each line are gone.

    I didn’t mean that I want to keep HTML tags since copying and pasting from a plain text editor has nothing to do with HTML tags, I just wanted to keep the white spaces that give structure to the code.

    And my main point is that…while having teeny : true this white spaces DONT disappear.

    So there has to be an internal configuration of tinyMCE that is removing this white spaces.

    Thanks! 🙂

    Plugin Author Andrew Ozz

    (@azaozz)

    In a normal plain text area, like this forum for example, If I copy and paste part of my code here it looks like this: …

    But doing it in the visual editor of TinyMCE Advanced has the following result: …

    As you can see the white spaces at the beginning of each line are gone.

    Thanks, I understand the problem now 🙂

    This is how HTML works. It doesn’t keep white spaces/line breaks unless they are in a <pre> tag. However in a textarea it keeps white spaces and line breaks.

    There are syntax highlighting plugins that would automatically wrap code samples in <pre> when switching Text => Visual.

    Your options are either to insert a <pre> tag in the Visual editor and then paste the code sample in it, or to paste it in the Text editor and use one of these plugins.

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

The topic ‘ nbsp Removed when pasting and posting’ is closed to new replies.