在CMS源代码中使用HTML属性

Question

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

Prestashop > Preferences > CMS > Source-Code。

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

问题

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

这是HTML页面的代码。

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

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

因此，在保存源代码之后，HTML看起来像这样：

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

预期：

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

Answer 1

您必须在PrestaShop 1.6的“首选项”>“常规”菜单中禁用“使用HTMLPurifier库”选项，或者在PrestaShop 1.7中使用“商店参数”>“常规”

Answer 2

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

安全风险：

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

我使用JavaScript来解决问题，所以我在CMS源代码中添加了div和id。

然后在某个URL上我找到了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>