在 CMS 源代码中使用 HTML 属性

Question

我将 Prestashop 用于构建内容页面的网站：

Prestashop > Preferences > CMS > Source-Code.

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

问题

我正在尝试将一个小部件集成到站点 CMS 页面，现在我在一个简单的 html 文档上测试了这个小部件，它可以完美运行。

这是 HTML 页面的代码。

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

Prestashop CMS > 源代码抛出 data-key="1111plzwork111"，这显然会破坏小部件。

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

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

预期：

有人可以帮我解决这个问题吗？我不知道该怎么做才能让它工作。因此，如果我保存源代码，HTML 将保留 data-key="1111plzwork111" 属性。

Answer 1

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

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>