Starting with version 5 the HTML standard allows <a>
tags wrap block-level elements. 在特定页面上,我需要用<a>
标签:
Some intro text.
<div>
<a href="http://somewhere/">
<h4>Some heading</h4>
<img src="http://somewhere/some-img.jpg" alt="Some image" />
</a>
</div>
虽然我可以在文本编辑器中输入,但它会导致一些奇怪的行为:上述代码将转换为以下HTML代码:
<p>Some intro text.</p>
<div>
<a href="http://somewhere/"></p>
<h4>Some heading</h4>
<p><img src="http://somewhere/some-img.jpg" alt="Some image" /><br />
</a>
</div>
显然,开场白<a>
然后是结束</p>
对于从未打开的<p>
这显然是错误的。还有一些非封闭的<p>
在<img>
标签由于这似乎是一个与新行相关的问题,我试图从我的Wordpress代码中删除新行:
Some intro text.
<div><a href="http://somewhere/"><h4>Some heading</h4><img src="http://somewhere/some-img.jpg" alt="Some image" /></a></div>
有趣的是,这会产生以下HTML代码:<p>Some intro text.</p>
<div><a href="http://somewhere/"><br />
<h4>Some heading</h4>
<p><img src="http://somewhere/some-img.jpg" alt="Some image" /></a></div>
现在,还有一个结尾</p>
标签在<img>
. (好的,HTML5 accepts non-closed <p>
tags... 但我不认为这种行为是故意在这里使用的。)此外,Wordpress还引入了<br />
不知从哪里冒出来的。到目前为止与Wordpress相关的问题。。。
现在谈谈与TinyMCE相关的问题:
从Wordpress中的文本编辑模式切换回视觉编辑模式时<a>
s仍然存在。但是,当再次切换回文本模式(或从可视编辑模式保存页面)时<a>
s完全移除。
有了这个解释,我们来谈谈我的主要问题:How can I make Wordpress and TinyMCE accept <a>
tags wrapping block-level elements?
以下是我已经尝试过的:
将筛选器添加到tiny_mce_before_init
这让TinyMCEvalid_children
的设置<a>
s包括<h4>
s(如问题中所述)HTML5, WordPress and Tiny MCE issue - wrapping anchor tag around div results in funky output“”
tiny_mce_before_init
这让TinyMCEschema
setting 到html5
.Block <a>
tags are getting stripped from the Editor“,但我真的不明白<a>
在那里,标签被视为故意行为。