TinyMCE编辑器破坏了我漂亮的HTML

这几乎与以下内容完全相同：如何使Wordpress和TinyMCE接受<a>标签，这些标签包装HTML5中允许的块级元素？和HTML5，WordPress和Tiny MCE问题-在div周围包裹锚定标记会导致输出时髦

我的问题是建议的解决方案（tiny_mce_before_init过滤器）似乎无法解决我的问题。我有看起来像这样的HTML：

<a href="#">
    <img src="path/to/file.jpg" />
    <p>Some amazing descriptive text</p>
</a>

在HTML5中是完全合法的。但是，WP编辑器不喜欢它，并将其转换为：

<a href="#">
    <img src="path/to/file.jpg" />
</a>
<p>Some amazing descriptive text</p>

当然，这破坏了我的布局。有谁知道我可以防止这种行为的方法？我不能放弃编辑器的Visual组件并坚持纯文本。欢迎任何建议。

清楚一点，当我使用下面的代码（在此处建议）时，<p>标记允许保留在锚点内，但是会添加大量额外的空间以及一个 实体，该实体每次在可视和文本模式之间切换时都会成倍增加。

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;
}

无论您将其配置为有效的子项如何，WordPress都会以非常独特的方式处理p标签以及换行符。您可能最终会注意到，如果尚未从文本编辑器切换到可视化编辑器，然后又回到可视化编辑器，则<p>标签将被剥离，类似于前端发生的情况。阻止这种情况发生的一种方法是为<p>标签提供一个自定义类。

<p class="text">This p tag won't get removed"</p>。

虽然↑这个↑可以防止p标签被剥夺，但由于前端上的标记仍被破坏，因此无法解决您的问题。您可以禁用 wpautop。如果您这样做并在有效的子级中包含p，则此问题将得到解决。

选项1：禁用自动设置并设置有效子代

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}

我应该警告您，尽管您第二次从HTML编辑器切换回TinyMCE，您的HTML将会被破坏。一种解决方法是完全禁用某些帖子类型的TinyMCE，如下面的选项2所示。

选项2：禁用自动P，TinyMCE并设置有效子代

remove_filter( 'the_content', 'wpautop' );
add_filter('tiny_mce_before_init', 'modify_valid_children', 99);
function modify_valid_children($settings){     
    $settings['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    return $settings;
}
add_filter('user_can_richedit', 'disable_wyswyg_to_preserve_my_markup');
function disable_wyswyg_to_preserve_my_markup( $default ){
  if( get_post_type() === 'post') return false;
  return $default;
}

对于大多数人来说，虽然 ↑这个↑ 不是选项。

那么还有哪些其他选择呢？我注意到的一种解决方法是将span标签与类一起使用，并确保HTML标签之间没有空白。如果执行此操作，则可以使用上面的选项一，而不必一起禁用TinyMCE。只要记住，您还必须在样式表中添加一些CSS才能正确显示范围。

选项3：选项1 +跨度标签

的HTML

<a href="#"><img src="https://placehold.it/300x200?text=Don%27t+P+On+Me" alt="" /><span class="noautop">Some amazing descriptive text</span></a>

样式表中的CSS

.noautop {
    display: block;
}

选项4：使用内置的媒体上传器短代码

我最初忘了这个，但是[caption]短代码看起来像这样：

[caption id="attachment_167" align="alignnone" width="169"]
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    awesome caption
[/caption]

输出将如下所示：

<figure id="attachment_167" style="width: 169px" class="wp-caption alignnone">
    <img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
    <figcaption class="wp-caption-text">Some amazing descriptive text</figcaption>
</figure>

如果您不想使用数字标签，则可以使用自定义内容短代码之类的插件来执行以下操作：

[raw] <p>this content will not get filtered by wordpress</p> [/raw]

为什么编辑器不能按我的意愿工作？

在过去的几年中，我花了无数的时间试图使它正常工作。有时候，我会提出一个完美的解决方案，但是WordPress会推送更新，使一切再次混乱。我找到的唯一解决方案可以完全正常工作，使我获得了最佳答案。

选项5：保留的HTML编辑器标记加上

因此，省去您的头痛，然后就去解决。默认情况下，Preserved HTML Editor Markup Plus仅影响新页面。如果要更改已经创建的页面，则必须转到www.example.com/wp-admin/options-writing.php并编辑插件设置。您还可以更改默认的换行行为。

注意：如果您决定使用此功能，请确保在启动新的WordPress更新时检查支持线程。有时，更改会使事情变得混乱，因此最好确保插件在较新的版本上运行。

额外的功劳：调试问题/编辑其他TinyMCE选项

如果您想像手动操作那样轻松地检查和轻松编辑 TinyMCE配置，可以使用过滤器，则可以安装高级TinyMCE config。它使您可以查看所有已配置的TinyMCE选项并从简单的界面进行编辑。您也可以像添加过滤器一样添加新选项。它使事情变得更容易理解。

例如，我同时拥有Preserved HTML Editor Markup Plus。下面的屏幕截图是Advanced TinyMCE Con​​fig admin页面的截图。尽管屏幕截图截取了实际内容的90％，但您可以看到它显示了可用于编辑的有效子代以及添加了Preserved HTML Editor Markup Plus的子代。

这是一种非常有用的方法，它不仅可以完全自定义编辑器，还可以查看正在发生的事情。您甚至可以找出导致问题的原因。在启用“保留HTML编辑器标记”后亲自查看了参数之后，我看到了一些可以添加到自定义过滤器中的其他选项。

function fix_tiny_mce_before_init( $in ) {

    // You can actually debug this without actually needing Advanced Tinymce Config enabled:
    // print_r( $in );
    // exit();

  $in['valid_children']="+a[div|p|ul|ol|li|h1|span|h2|h3|h4|h5|h5|h6]";
    $in[ 'force_p_newlines' ] = FALSE;
    $in[ 'remove_linebreaks' ] = FALSE;
    $in[ 'force_br_newlines' ] = FALSE;
    $in[ 'remove_trailing_nbsp' ] = FALSE;
    $in[ 'apply_source_formatting' ] = FALSE;
    $in[ 'convert_newlines_to_brs' ] = FALSE;
    $in[ 'verify_html' ] = FALSE;
    $in[ 'remove_redundant_brs' ] = FALSE;
    $in[ 'validate_children' ] = FALSE;
    $in[ 'forced_root_block' ]= FALSE;

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

不幸的是，这种方法不起作用。更新帖子和/或在编辑器之间切换时，可能会发生一些正则表达式或JavaScript。如果您查看Preserved HTML Editor源代码，您会发现它在管理员方面确实有一些JavaScript工作，所以我的最后建议是，如果您想在主题中添加此功能，请检查插件的工作方式。

无论如何，对于在我的回答中走得这么远的任何人表示抱歉。只是以为我会分享自己与WordPress编辑器打交道的经验，所以希望其他人不必像我一样花费数小时来尝试解决这个问题！