0

I've seen this question asked a few times, but none of the solutions have worked for me. Basically, when switching between TinyMCE and the HTML editor, my markup gets ruined.

I have a nested list on the page, like so:

<ul class="pageitem accordion-menu">
    <li class="accordion-menu"><a class="accordion-child" href="#">Parent Link</a>
      <ul class="accordion-menu-sub">
        <li class="acc-sub"><a href="#">Link</a></li>
        <li class="acc-sub"><a href="#">Link</a></li>
        <li class="acc-sub"><a href="#">Link</a></li>
      </ul>
    </li>
(...)
</ul>

After switching to tinyMCE and back, it turns into this: 

<ul class="pageitem accordion-menu">
    <li class="accordion-menu"><a class="accordion-child" href="#">Parent Link</a><br />
      <ul class="accordion-menu-sub">
        <li class="acc-sub"><a href="#">Link</a></li>
        <li class="acc-sub"><a href="#">Link</a></li>
        <li class="acc-sub"><a href="#">Link</a></li>
      </ul>
    </li>
(...)
</ul>

HTML comments also don't work at all, but I have removed them for this example because I can live with that if need be.

I've tried disabling a lot of the content formatting options: 

public function format_TinyMCE( $in ) {
    $in['allow_conditional_comments'] = true;
    $in['allow_html_in_named_anchor'] = true;
    $in['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";
    $in['convert_urls'] = false;
    $in['doctype'] = '<!DOCTYPE html>';
    $in['fix_list_elements'] = false;
    $in['forced_root_block'] = false;
    $in['relative_urls'] = true;
    $in['remove_linebreaks'] = false;
    $in['remove_trailing_brs'] = false;
    $in['object_resizing '] = false;
    $in['wpautop'] = false;

    return $in;
  }
 add_filter( 'tiny_mce_before_init', 'format_TinyMCE' );

I have also disabled wpautop:

remove_filter( 'the_content', 'wpautop' );
remove_filter( 'the_excerpt', 'wpautop' );

I have tried Don't Muck My Markup and it didn't work. I also have the HTML Editor Syntax Highlighter Plugin installed, but disabling it didn't make a difference.

Any help on how to stop unwanted reformatting from happening would be appreciated. Disabling either of the editor is not an option since it still needs to be editable for people without knowledge of HTML.

Improve this question
2
  • The Text editor is not an HTML editor. If you want to write pure un-adulterated HTML write it in a template or plugin.
    – Jacob Peattie
    Commented Jul 12, 2018 at 8:25
  • I think this is a valid question and does not warrant a downvote - it has to be editable, otherwise I would not put it in a page.
    – Sarah R
    Commented Jul 12, 2018 at 8:29

1 Answer 1

Reset to default
0

It might be difficult to completely eliminate all of TinyMCE's quirks when it comes to editing HTML.

Another (clunky?) work round would be to set up shortcodes for the unordered list. When you then apply the shortcodes, the HTML will be output to the browser without manipulation from TinyMCE.

For example:

function ul_func( $atts ){
    return '<ul class="pageitem accordion-menu">';
}
add_shortcode( 'ul', 'ul_func' );

function li_func( $atts ){
    return '<li class="accordion-menu">';
}
add_shortcode( 'li', 'li_func' );

function close_ul_func( $atts ){
    return '</ul>';
}
add_shortcode( 'close_ul', 'close_ul_func' );

function close_li_func( $atts ){
    return '</li>';
}
add_shortcode( 'close_li', 'close_li_func' );

You could then create the list in the visual editor with:

[ul]
[li]list item here[close_li]
[close_ul]
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.