百度富文本框在vue3中标签问题

Question

百度富文本框在vue3中标签无法保存

转换后

然后转换的html

这个不支持freemarker 语法吗，我修改配置关闭了xss过滤也不生效

白名单无法添加，保存主体前不允许又特殊字符
又什么办法解决的吗

 <#if>sdssss</#if> 能原样转换最好了 转换为  &lt;#if&gt;sdssss &lt;/#if&gt; 这样也行
&lt;#if&gt;sdssss<!--#if--> 只要不是这种就行，要支持全部的freemarker 语法，不用考虑xss风险

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

百度富文本框在vue3中标签问题

你遇到的问题是百度富文本框在 Vue3 中标签无法保存转换后，转换的 HTML 不支持 Freemarker 语法，即使你关闭了 XSS 过滤和添加了白名单也无法生效。

解决方案：

1. 在富文本框的配置中，设置 allowScript 和 allowStyle 选项为 true，以允许用户输入脚本和样式代码。

<template>
  <baidu-editor :config="editorConfig"></baidu-editor>
</template>

<script>
export default {
  data() {
    return {
      editorConfig: {
        allowScript: true,
        allowStyle: true
      }
    }
  }
}
</script>

1. 如果你需要支持 Freemarker 语法，可以在富文本框的配置中设置 allowFreemarker 选项为 true。

<template>
  <baidu-editor :config="editorConfig"></baidu-editor>
</template>

<script>
export default {
  data() {
    return {
      editorConfig: {
        allowFreemarker: true
      }
    }
  }
}
</script>

1. 如果你需要添加白名单，可以在富文本框的配置中设置 whiteList 选项，例如：

<template>
  <baidu-editor :config="editorConfig"></baidu-editor>
</template>

<script>
export default {
  data() {
    return {
      editorConfig: {
        whiteList: ['p', 'span', 'img']
      }
    }
  }
}
</script>

这些解决方案可以帮助你解决百度富文本框在 Vue3 中标签的问题。