By Xav


2013-04-22 09:49:45 8 Comments

So I'm using HTML5 on a website and am trying to wrap a div in an anchor tag, which is supposedly acceptable in HTML5 websites. But when I do this...

<a href="#mylink"><div class="some_class">Some content</div></a>

...through the WordPress Tiny MCE editor, I get this output:

<p><a href="#mylink">&nbsp;</a></p>
<a href="#mylink"><div class="some_class">Some content</div></a>
<p><a href="#mylink"></a></p>

All kinds of messed up. If I flip to the visual editor and back to Text in Tiny MCE, it has changed the code to this:

<a href="#mylink"> </a>
<div class="some_class">Some content</div>
&nbsp;

Does anyone know how to force Tiny MCE to allow this? (ideally without resorting to the advanced plugin version of Tiny MCE)

Thanks for any advice.

1 comments

@Matt 2013-04-22 15:11:48

You need to modify the TinyMCE settings, specifically the valid_children setting. To accomplish this in Wordpress, use the tiny_mce_before_init filter reference.

Something like this (untested):

add_filter('tiny_mce_before_init', 'modify_valid_children');

function modify_valid_children($settings){
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

You may be able to use +a[*] to capture all elements, but you'll want to take care to avoid nested anchor tags.

@Xav 2013-04-23 16:52:36

Thanks Matt but I still can't get this to work. FYI, I had to remove the ) on line 6 - it errored otherwise

@Matt 2013-04-25 16:10:14

Ah, good catch. Looks like I've been writing too much jQuery lately. :) You should also remove the semi-colon. I've updated my answer to reflect this. Not sure if this will make a difference for you, but I don't suspect it will.

@Ralf912 2013-04-25 21:48:57

Setting "valid_elements", "invalid_elements" and "extended_valid_elements" can be done through this filter. from a comment in the core file

@Ralf912 2013-04-25 22:09:46

Why don't you use just a <span> or <p> instead of a <div>?

Related Questions

Sponsored Content

1 Answered Questions

[SOLVED] TinyMCE editor is breaking my beautiful HTML

1 Answered Questions

[SOLVED] Tiny MCE editor stripping xlink:href parameter from SVG USE tag

2 Answered Questions

[SOLVED] Add drop down in wordpress tiny mce editor pop up

  • 2016-09-13 08:17:39
  • bagpipper
  • 1352 View
  • 1 Score
  • 2 Answer
  • Tags:   tinymce

3 Answered Questions

[SOLVED] Wordpress tinymce prints empty P tag and break html format

0 Answered Questions

Filter html of WordPress editor in visual mode only

1 Answered Questions

[SOLVED] Tiny MCE custom styles, and preview in the backend

1 Answered Questions

[SOLVED] Tiny MCE not adding p tag when saving theme option

  • 2011-12-21 12:43:08
  • Sisir
  • 939 View
  • 3 Score
  • 1 Answer
  • Tags:   tinymce wp-editor

3 Answered Questions

[SOLVED] Wordpress Tiny MCE won't accept line breaks

  • 2011-07-26 16:22:48
  • Drai
  • 888 View
  • 0 Score
  • 3 Answer
  • Tags:   tinymce

3 Answered Questions

[SOLVED] How to allow <video> html5 tag in Wordpress

Sponsored Content