问题描述
这几乎完全相同:How to make WordPress and TinyMCE accept tags wrapping block-level elements as allowed in HTML5? 和 HTML5, WordPress and Tiny MCE issue – wrapping anchor tag around div results in funky output
我的问题是建议的解决方案 (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>
这当然打破了我的布局。有人知道我可以防止这种行为吗?我不能放弃编辑器的视觉组件,并坚持纯文本。欢迎任何建议。
为了清楚起见,当我使用下面的代码 (suggested here) 时,<p>
标签被允许保留在锚点内,但是与
实体一起添加了很多额外的空间,每次在 Visual 和 Text 模式之间切换时都会相乘。
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 标签不被剥夺,它不会解决你的问题,因为你的标记在前端仍然被弄脏。你可以 DISABLE wpautop 。如果你这样做,并且 p 包含在有效的孩子中,这将会修复你的错误。
选项 1:禁用 Autop 并设置有效的孩子
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;
}
对于大多数人虽然↑这个↑不是一个选择。
那么还有哪些选择呢?我注意到的一种解决方法是使用跨标签与类,并确保您的 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:使用内置的媒体上传器短码
我最初忘了这个,但 http://%2520https%3A//github.com/WordPress/WordPress/blob/fdb6bbfa10c2acca0074c4c741f6dff122e3ce1d/wp-includes/media.php%23L1433 短码将如下所示:
<img class="size-medium wp-image-167" src="http://example.com/example.png" alt="" width="169" height="300" />
awesome 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>
如果您不想要图形标签,您可以使用像 custom content shortcode 这样的插件,可以让你这样做:
[raw] <p>this content will not get filtered by wordpress</p> [/raw]
为什么编辑器不能正常工作?
过去几年,我花了无数小时努力让这个工作顺利。偶尔我会提出一个完美的解决方案,但是 Wordpress 将会推出一个更新,把所有的东西都弄乱了。唯一的解决方案,我曾经发现完全工作如何应该,导致我最好的答案我有。
Option 5 : Preserved HTML Editor Markup Plus
所以保存自己头痛,只要走这个。默认情况下,保留的 HTML 编辑器标记加号仅影响新页面。如果要更改已创建的页面,则必须访问 www.example.com/wp-admin/options-writing.php 并编辑插件设置。您还可以更改默认换行符。
Note: If you do decide to use this make sure you check the support thread when a new wordpress update gets launched. Occasionally, an change will mess things up so it’s best to make sure the plugin works on the newer versions.
额外的信用:调试你的问题/编辑其他的 Tinymce 选项
如果要手动检查并轻松编辑 TINYMCE 配置,就像使用过滤器一样,可以安装 advanced tinymce config 。它允许您查看所有配置的 TINYMCE 选项,并从简单的界面进行编辑。您也可以像筛选器一样添加新选项。它使事情变得更容易理解。
例如,我拥有和保留的 HTML 编辑器标记加号。下面的截图是 Advanced Tinymce Config 管理页面。虽然屏幕截图正在切除真正的 90%的内容,您可以看到它显示有效的孩子可以编辑,哪些保留的 HTML 编辑器标记加上添加。
这是一个非常有用的方法,不仅可以完全自定义您的编辑器,还可以看到发生了什么。你可能甚至可以弄清楚导致你的问题的原因。查看参数后,保留 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 。如果您看看保存的 HTML 编辑器源代码,您可以看到它在管理端执行一些 JavaScript 工作,所以我最后一点建议是检查 how the plugin works 如果你想在你的主题中添加这个功能。
无论如何,对于在我的答案中已经得到这么远的任何人来说,对不起。只是想我会分享我自己的处理 wordpress 编辑的经验,所以其他人希望不用花几个小时来像我一样想出来!
参考文献
注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。