本文旨在解决在使用 Laravel Purifier 时，如何配置以支持自定义 HTML 元素的问题。通过修改 Purifier 的配置文件，定义自定义元素及其属性，可以确保用户输入的内容在经过清洗后，保留自定义元素，从而满足特定业务需求。
在使用 Laravel Purifier 清理用户提交的 HTML 内容时，有时需要支持自定义的 HTML 元素。默认情况下，Purifier 会移除未知的 HTML 标签。为了解决这个问题，我们需要在 Purifier 的配置中显式地声明这些自定义元素。
配置 Purifier 以支持自定义元素
假设我们有一个自定义的 Vue 组件 <image-slides>，它接受一个 images 属性，该属性包含逗号分隔的图片 URL 列表。为了让 Purifier 保留这个组件，我们需要修改 config/purifier.php 文件。
立即学习“前端免费学习笔记（深入）”；
首先，确保 HTML.Allowed 配置项包含了该自定义元素。
return [
'settings' => [
'default' => [
'HTML.Allowed' => 'div,b,strong,i,em,a[href|title],ul,ol,ol[start],li,p[style],br,span[style],img[width|height|alt|src],*[style|class],pre,hr,code,h2,h3,h4,h5,h6,blockquote,del,table,thead,tbody,tr,th,td,image-slides[images]',
],
],
];其次，也是更重要的一步，我们需要在 custom_elements 配置项中定义这个自定义元素。custom_elements 是一个数组，每个元素都是一个数组，包含自定义元素的名称、类型、内容模型和属性。
return [
'settings' => [
'default' => [
'HTML.Allowed' => 'image-slides[images]', // 仅允许 image-slides 标签，根据实际情况调整
],
'custom_elements' => [
['image-slides', 'Block', 'Flow', 'Common', [
'images' => 'Text'
]]
]
]
];配置项详解：
- image-slides: 自定义元素的标签名。
- Block: 元素的类型，可以是 Block（块级元素）, Inline（行内元素）等。
- Flow: 内容模型，可以是 Flow（可以包含任何 Flow 内容）, Inline（只能包含 Inline 内容）等。
- Common: 表示该元素具有通用属性。
- ['images' => 'Text']: 定义元素的属性。images 是属性名，Text 是属性值的类型。 其他类型包括 CDATA, URI, Number 等。
示例代码：
假设用户输入以下 HTML 内容：
<h2>My Title</h2> <image-slides images="https://i.imgur.com/123.jpg,https://i.imgur.com/321.jpg"></image-slides> <p>some text</p>
使用上述配置的 Purifier 清理后，结果将是：
<h2>My Title</h2> <image-slides images="https://i.imgur.com/123.jpg,https://i.imgur.com/321.jpg"></image-slides> <p>some text</p>
注意事项：
- 在修改 config/purifier.php 文件后，务必清除 Purifier 的缓存。可以通过删除 storage/app/purifier 目录下的所有文件来实现。 也可以使用 php artisan config:clear 清除配置缓存。
- HTML.Allowed 配置项的设置应该尽可能精确，只允许需要的 HTML 标签和属性，以提高安全性。
- 根据实际情况调整自定义元素的类型和内容模型。
- 如果自定义元素需要支持复杂的属性类型，可以考虑使用自定义的属性验证规则。
总结：
通过在 config/purifier.php 文件中定义 custom_elements，可以轻松地让 Laravel Purifier 支持自定义的 HTML 元素。这使得我们可以在保证安全性的前提下，灵活地处理用户提交的 HTML 内容，满足各种业务需求。 记住清除缓存以使配置生效，并仔细考虑自定义元素的类型和属性，以确保 Purifier 的行为符合预期。
