Tinymce图像自动包装在<p>标签中.CSS方式或文本编辑器黑客攻击

Question

Hiya,
我现在多次遇到这个问题使用drupal或wordpress,我的tinymce配置文件有点过于巧妙抽象.

问题是tinymce会自动将我的<img>标签包装在<p>标签中.如果在Wordpress或Drupal中有这种方法,这将是非常棒的.

当我想做这样的事情时,我的问题就存在了

<style>
    img {
        float: left;
    }
    p {
        float: right;
        margin-right: 20px;
        width: 400px;
    }
 </style>

我希望我的代码看起来像这样

<img src="some_png.png" />
<p> Imagine a lot of lipsum text.</p>

但是tinymce这样做

<p><img src="crap_im_wrapped_in_a_paragraph.png" /></p>
<p> Imagine a lot of lipsum text.</p>

我试图将图像浮动到具有设定宽度的段落的左侧,而不对图像本身施加宽度限制.
在这种情况下,图像的父级然后获得宽度和向右浮动.那不是我想要的.

很可能有一个简单聪明的解决方案,但我仍然没有找到一个.如果我不需要,我宁愿不破解我的配置文件.

1警告...
存在这个问题的唯一原因是因为我希望客户能够轻松地进行自己的编辑,所以我不会让它们将图像包装成一个<div>而不是一个<p>.对于我的客户来说,这似乎是不直观的,他们是真实用户的真实用户

以前的解决方案
我一直在使用正则表达式删除段落标记,但它总是有点问题.我最终在其他地方添加了更多图像,然后我必须不断调整我的正则表达式来忽略它们.502错误比比皆是!

我的问题是(是)
我可以在CSS中使段落中包含的图像做我想做的事情吗？
如果我不能,我可以
做什么drupal或wordpress使该段消失？

- 编辑 - 解决方案需要与IE7 +和现代浏览器兼容.:P

谢谢!
亚伦

Answer 1

你用tinyMCE.init函数调用tinyMCE,不是吗？

所以添加这个字符串:

forced_root_block : false,

你也可以改变tiny_mce_src.js.找

forced_root_block : 'p',

并将其更改为

forced_root_block : false,

PS不要伪造清除缓存.

Answer 2

如果您不希望它包装图像标记,请在Tinymce源中查找名为"isBlock"的函数.有一个正则表达式白名单测试,用于确定元素是否为块元素.如果需要将图像标记视为块元素,则将"IMG"添加到它查找的节点名称列表中.我只是自己必须这样做,我现在仍在寻找负面的副作用,但它确实解决了眼前的问题.

编辑:这是或多或少是一个临时的解决方案,如果你只需要停止图像标签的根级别块包边,有一个名为"forceRoots"在那里你会真正要执行你的形象标签检查功能.我通过修改这行代码来做到这一点:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8)) {

看起来像这样:

if (nx.nodeType == 3 || (!t.dom.isBlock(nx) && nx.nodeType != 8) && nx.nodeName.toLowerCase() != "img") {

这对我来说很好地解决了这个问题.