本文旨在解决在使用 Laravel Purifier 库时，如何允许自定义 HTML 元素（如 Vue 组件）不被过滤的问题。通过配置 Purifier，你可以安全地在用户输入中保留特定的自定义标签及其属性，从而实现更灵活的内容管理。本文将详细介绍如何配置 config/purifier.php 文件，以支持自定义元素，并避免 “Element is not supported” 错误。
在使用 Laravel Purifier 对用户输入进行清理时，如果用户输入包含自定义 HTML 元素，例如 Vue 组件 <image-slides>，Purifier 默认会移除这些未知元素。为了允许这些自定义元素存在，我们需要在 Purifier 的配置文件中进行相应的设置。
配置自定义元素
在 config/purifier.php 文件中，你需要进行两方面的配置：一是允许该元素出现在 HTML.Allowed 列表中，二是定义该自定义元素的属性和类型。
立即学习“前端免费学习笔记（深入）”；
首先，找到 settings 数组中的 'default' 配置，并在 HTML.Allowed 中添加你的自定义元素。例如，要允许 <image-slides> 元素及其 images 属性，可以这样配置：
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]'
],
]
];接下来，你需要定义自定义元素的属性和类型。 这需要在 settings 数组中添加一个名为 custom_elements 的配置项。 custom_elements 是一个数组，每个元素都是一个数组，包含自定义元素的名称、类型、内容模型和属性。
return [
'settings' => [
'default' => [
'HTML.Allowed' => 'image-slides[images]'
],
'custom_elements' => [
['image-slides', 'Block', 'Flow', 'Common', [
'images' => 'Text'
]]
]
]
];在上面的示例中：
- 'image-slides' 是自定义元素的名称。
- 'Block' 指示该元素是一个块级元素。
- 'Flow' 指示该元素可以包含文本和其他内联元素。
- 'Common' 指示该元素具有通用属性。
- ['images' => 'Text'] 定义了 images 属性，并指定其类型为 Text。
清除缓存
完成配置后，务必清除 Purifier 的缓存，以使更改生效。你可以通过删除 /storage/app/purifier 目录下的所有文件来清除缓存。 同时，也建议清除 Laravel 的缓存，例如使用 php artisan cache:clear 命令。
注意事项
- 类型选择： custom_elements 数组中的类型（例如 'Block'、'Flow'）需要根据你的自定义元素的实际用途进行选择。选择错误的类型可能导致 Purifier 无法正确处理该元素。
- 属性类型： 属性类型（例如 'Text'）也需要根据实际情况进行选择。 常用的属性类型包括 Text、CDATA、URI 等。
- 安全性： 虽然允许自定义元素可以增加灵活性，但也可能带来安全风险。 请确保你充分了解自定义元素的用途，并仔细审查用户输入，以防止 XSS 攻击。
总结
通过在 config/purifier.php 文件中配置 HTML.Allowed 和 custom_elements，你可以轻松地在使用 Laravel Purifier 时支持自定义 HTML 元素。 记住，配置完成后要清除缓存，并注意安全性，以确保你的应用程序能够安全地处理用户输入。
