在CMS源代码中使用HTML属性

Im使用Prestashop构建内容页面的网站，使用：

Prestashop>Preferences>CMS>源代码

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

问题

我正在尝试将一个小部件集成到网站CMS页面，现在我在一个简单的html文档上测试了这个小部件，它工作得非常好

这是HTML页面的代码

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

期望值：

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();
}

有人能帮我解决这个问题吗？我不知道该怎么做才能让它工作。因此，如果我保存源代码，HTML将保留

data key=“1111plzwork111”

属性。

您必须禁用PrestaShop 1.6中Preferences>General菜单中的Use HTMLPurifier Library选项或PrestaShop 1.7中的Shop Parameters>General

---

@WebXY有固定的答案，它工作得很好。但如果有人不喜欢关闭HTMLPurifier，因为它会带来安全风险

安全风险：

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

我使用JavaScript解决了这个问题，因此我在CMS源代码中添加了一个带有

id

的

div

然后在某个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();
}

功能计划（）{
“严格使用”；
var location=window.location.pathname；
var dinePlanId=document.getElementById（“dineplan”）；
如果（位置！==null&&D平面ID！==null）{
如果（地点==“/餐厅”）{
//console.log（“找到你”）；
dinePlanId.innerHTML=''；
} 
}
}
$（文档）.ready（函数（）{
计划（）；
}

源代码：（CMS内）

Thank man works！！事实上，我最终使用js将html添加到div中，但你解决了这个问题！+1我也会使用这种方法。你不想降低整个商店的安全性，只是为了可以在一个元素上使用数据属性。@Drmot yess man我只是在使用这种方法时睡得更好：）

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