wangEditor 禁用 HTML 过滤

作者：蛮不讲李2024.03.15 05:04浏览量：154

简介：本文介绍了如何在使用 wangEditor 富文本编辑器时禁用默认的 HTML 过滤功能，允许用户输入和显示原始的 HTML 代码。

引言

WangEditor 是一款轻量级的 Web 富文本编辑器，广泛应用于各种前端项目中。为了确保用户输入内容的安全性，WangEditor 默认会对用户输入的 HTML 代码进行过滤，防止 XSS（跨站脚本）攻击。然而，在某些特定场景下，我们可能需要禁用这个过滤功能，让用户能够输入和显示原始的 HTML 代码。

禁用 HTML 过滤

要禁用 WangEditor 的 HTML 过滤功能，你可以通过设置编辑器的 config.allowDivTransToP 和 config.filterTxtNodes 选项来实现。这两个选项控制着编辑器如何处理输入的 HTML 代码。

  1. 设置 config.allowDivTransToP 为 false

默认情况下，WangEditor 会将用户输入的 <div> 标签转换为 <p> 标签。如果你想保留用户输入的原始 HTML 结构，包括 <div> 标签，你需要将 config.allowDivTransToP 设置为 false。

  1. const editor = new wangEditor('#editorContainer');
  2. editor.config.allowDivTransToP = false;
  3. editor.create();
  1. 设置 config.filterTxtNodes 为 false

WangEditor 默认会过滤掉纯文本节点（只包含文本的节点）。如果你希望保留这些节点，你可以将 config.filterTxtNodes 设置为 false。

  1. const editor = new WangEditor('#editorContainer');
  2. editor.config.filterTxtNodes = false;
  3. editor.create();

注意事项

虽然禁用 HTML 过滤功能可以让你在编辑器中显示原始的 HTML 代码，但这也可能增加你的应用程序受到 XSS 攻击的风险。因此，在决定禁用 HTML 过滤功能之前，请确保你了解相关的安全风险，并采取适当的安全措施来防止潜在的攻击。

示例

下面是一个简单的示例，演示了如何在 WangEditor 中禁用 HTML 过滤功能，并显示原始的 HTML 代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>WangEditor 禁用 HTML 过滤示例</title>
  6.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/css/wangEditor.min.css">
  7. </head>
  8. <body>
  9.     <div id="editorContainer" style="width: 100%; height: 500px;"></div>
  11.     <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
  12.     <script>
  13.         const editor = new WangEditor('#editorContainer');
  14.         editor.config.allowDivTransToP = false;
  15.         editor.config.filterTxtNodes = false;
  16.         editor.create();
  17.     </script>
  18. </body>
  19. </html>

在上面的示例中，我们创建了一个 WangEditor 实例，并设置了 allowDivTransToP 和 filterTxtNodes 选项为 false。这样，用户在编辑器中输入的任何 HTML 代码都将被保留并显示出来，而不会被过滤或转换。

最热文章