tinyMCE 删除 background-image:"" 内容与 magento 类似的 url答案

【问题标题】：tinyMCE deletes background-image:"" content with magento like urlstinyMCE 删除 background-image:"" 内容与 magento 类似的 url
【发布时间】：2015-05-24 01:01:11
【问题描述】：

我在 magento 中有 cms 块，其中一个 div 元素具有带有背景图像的样式属性，值是 magento 样式 URL

<div class="contain-wide" style="background-image: url('{{media url="wysiwyg/spare-parts.jpg"}}')">

问题是当我打开所见即所得编辑器时，这一行被编辑为

<div class="contain-wide" wysiwyg="" spare-parts="" jpg="">

并且不再是有效的内联 css。

我尝试将这些设置添加到 /js/mage/adminhtml/wysiwyg/tiny_mce/setup.js

        cleanup_on_startup: false,
        trim_span_elements: false,
        verify_html: false,
        cleanup: false,
        valid_elements: '*[*]',

不幸的是，只禁用了 html 验证，css 仍然由 tinyMCE 自动编辑。

【问题讨论】：

我猜它与引号有关，最好是设置图像的完整路径或通过类设置它，您甚至可以为此添加预设规则调整tinymce
那不是最好的。您将无法使用 cdn 并将其打开/关闭（更改媒体网址），或者添加图像背景将需要一直编辑样式表。
通过一个类，你只需要更新你的css文件。在 tinymce 中搜索自定义格式或格式并更新自定义 tinymce 的样式选择或格式。我就是这样做的，所以作者不会破坏设计，只是在写作时拿起足够的标签。加载页面后应用 css。更改或删除样式表，然后它看起来完全不同。请原谅我的普通英语，希望你能明白我的意思。
并且客户总是愿意为 css 更新支付 100 美元，只是因为他需要更改背景图像以进行块。你根本没有帮助。

标签： javascript html css magento tinymce

【解决方案1】：

您应该能够通过所见即所得选择页面的一部分，然后单击insert/edit attributes（在 tinymce 工具的最后一行，一个小盒子顶部有一只手），您应该能够编辑属性，也许可以制作你需要的东西。

这实际上会为你创建一个 div，在这个弹出框中你可以选择你想要的这个 div 的样式。

编辑：但正如@GCyrillus 对您的问题的评论，我建议您通过样式来完成，因为这意味着管理员只想编辑内容可能会破坏网站的视觉布局。

【讨论】：

【解决方案2】：

不要使用 MCE，而是使用直接路径。 IE。 src="http(s)://yourimage.jpg">

【讨论】：

意思是在根目录上传图片并调用它，这应该会消除与tinyMCE的冲突