防止在可视和HTML编辑器之间切换时更改标记

时间:2018-07-12 作者:Sarah R

这个问题我已经问过好几次了,但没有一个解决方案对我有效。基本上,在TinyMCE和HTML编辑器之间切换时,我的标记会被破坏。

我在页面上有一个嵌套列表,如下所示:

<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>
切换到tinyMCE并返回后,会变成:

<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注释也根本不起作用,但我在本例中删除了它们,因为如果需要的话,我可以接受它们。

我尝试过禁用许多内容格式选项:

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\' );
我还禁用了wpautop:

remove_filter( \'the_content\', \'wpautop\' );
remove_filter( \'the_excerpt\', \'wpautop\' );
我试过不要弄脏我的标记,但没有成功。我还安装了HTML编辑器语法Highlighter插件,但禁用它并没有什么不同。

如果您能帮助我们阻止不必要的重新格式化,我们将不胜感激。禁用任一编辑器都不是一个选项,因为对于不懂HTML的人来说,它仍然需要可编辑。

1 个回复
最合适的回答,由SO网友:junkrig 整理而成

在编辑HTML时,可能很难完全消除TinyMCE的所有怪癖。

另一个(笨重?)解决方法是为无序列表设置短代码。然后应用短代码时,HTML将输出到浏览器,而无需TinyMCE进行操作。

例如:

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\' );
然后,您可以在可视化编辑器中使用以下工具创建列表:

[ul]
[li]list item here[close_li]
[close_ul]

结束

相关推荐

WP_GET_ARCHIVE不会从css或html生效

我会尽量简短。因此,基本上我正在尝试将自定义项添加到我的菜单中,在本例中,这是带有months desc的归档下拉列表.wp_get_archives 也会忽略所有cssfunction add_archive_dropdown($items, $args) { if( $args->theme_location == \'primary\' ){ $items .=\'<li class=\"nav-item dropdown\">\'