在CMS源代码中使用HTML属性

Question

我使用 Prestashop 作为使用以下内容构建内容页面的网站：

Prestashop > Preferences > CMS > Source-Code。

因此，对于每个CMS页面，我都使用基本 HTML 的源代码。

问题

我试图将小部件集成到网站CMS页面，现在我已经在一个简单的html文档上测试了小部件，它运行得很好。

这是HTML页面的代码。

<div class="work-widget" data-key="1111plzwork111"></div>

Prestashop CMS＆gt; Source-Code抛出data-key="1111plzwork111"，这显然打破了小部件。

所以保存源代码后，HTML看起来像这样：

<div class="work-widget"></div>

预期：

有人可以帮我找出解决方法，我不知道该怎么做才能使它工作。因此，如果我保存源代码，HTML将保留data-key="1111plzwork111"属性。

Answer 1

您必须在首选项＆gt;中停用使用HTMLPurifier库选项PrestaShop 1.6中的常规菜单或商店参数＆gt;一般在PrestaShop 1.7

Answer 2

@WebXY有固定的答案，它完美无缺。但是如果有人因为组成安全风险而关闭 HTMLPurifier 而感到不满意。

安全风险：

  

了解你的敌人。黑客拥有隐藏在HTML规范深处的大量XSS向量。 HTML Purifier是有效的，因为它将整个文档分解为标记并删除非白名单元素，检查标记的格式和嵌套，并根据其RFC验证所有属性。

我使用JavaScript来解决问题，因此我向CMS源代码添加了div id。

然后在某个网址上找到了ID并添加了innerHTML：

JS：

function dinePlan() {
"use strict";

var location = window.location.pathname;
var dinePlanId = document.getElementById("dineplan");

 if (location !== null && dinePlanId !== null) {
    if (location === "/restaurant"){
        // console.log("found you");
        dinePlanId.innerHTML = '<div class="work-widget" data-key="1111plzwork111"></div>';
       } 
    }
}

$(document).ready(function(){
  dinePlan();
}

源代码：（在CMS内）

<div id="dineplan"></div>