在 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，因为它会带来安全风险。

安全风险：

Know thy enemy. Hackers have a huge arsenal of XSS vectors hidden within the depths of the HTML specification. HTML Purifier is effective because it decomposes the whole document into tokens and removing non-whitelisted elements, checking the well-formedness and nesting of tags, and validating all attributes according to their RFCs.

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

Source-Code:（在 CMS 内）

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

在 CMS 源代码中使用 HTML 属性

Using HTML attribute within CMS source code

html

content-management-system

prestashop

datakey

prestashop-1.6