allow html 5 tags in tinymce editor for wordpress, when switching to visual tab in the editor and back

3 Views

I am simply trying to retain my <u> tags and <b> tags, in wp admin post editor.
However when switching back and forth from the visual view to the text/html view they are being changed to <span style="text-decoration: underline;"></span>this is annoying and spans in my case would be problematic.

what is the best way to go about this, I have tried some plugins which aren’t of help and adding and extending valid elements … but have not succeeded as of yet!

Read More

It would be of great help if some of you geniuses could point me in the right direction.

Also a different question I have;

Is there a simple way to add a style button to the text editor that will change the direction of the form in the text view of the editor from ltr and rtl,
I have done this easily via changing the css in the developer tools or firebug! but am asking for something built in!

Post Views: 3

Related posts

Leave a Reply

3 comments

  1. You simply have to disable the inline_styles option (which is turned on by default in the version of TinyMCE that’s included with WordPress):

    add_filter('tiny_mce_before_init', function ( $options )
{
    $options['inline_styles'] = false;

    return $options;
});

    Although this works, I’d strongly advise against it. This use of the u element has been deprecated in HTML5, and is considered non-semantic in this context.

    If you can explain why you’re trying to do this, maybe we can come up with a better solution.

    P.S. There’s a great discussion about this over at the TinyMCE forums.

  2. I’m relatively new to all this and I couldn’t figure out how to do this so, here is the code. Pulled it from the core class-wp-editor.php file. Here it is:

    function my_tiny_mce_tweaks( $first_init ) {
  $first_init['formats'] = '{' .
      'alignleft: [' .
          '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"left"}},' .
          '{selector: "img,table,dl.wp-caption", classes: "alignleft"}' .
      '],' .
      'aligncenter: [' .
          '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"center"}},' .
          '{selector: "img,table,dl.wp-caption", classes: "aligncenter"}' .
      '],' .
      'alignright: [' .
          '{selector: "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li", styles: {textAlign:"right"}},' .
          '{selector: "img,table,dl.wp-caption", classes: "alignright"}' .
      '],' .
      'strikethrough: {inline: "del"},' .
      'underline: {inline: "u"}' .
  '}';

  return $first_init;
}
add_filter('tiny_mce_before_init', 'my_tiny_mce_tweaks');

    PLEASE NOTE: It only changes the behavior of underline button, if you want bold, italic as b and i tags, add @Thariama’s comment to the code.

  3. You may simple init your editor with the following

        // Override internal formats  
    formats: {
        bold : {inline : 'b' },  
        italic : {inline : 'i' },
        underline : {inline : 'u'}
    },

    Tinymce will then treat bold, italic underline as b,u and i-tags.