如何在Umbraco 10的富文本编辑器（RTE）中直接添加样式

你的问题源于Umbraco 10的TinyMCE富文本编辑器默认启用了内容清理机制，会移除未被允许的HTML标签、内联样式或属性，导致手写的样式被清除，甚至内容丢失。以下是可行的解决方法：

方法1：自定义RTE的允许标签与样式（后台配置） #

• 进入Umbraco后台，依次打开Settings → Data Types，找到你使用的富文本编辑器数据类型（如默认的"Rich Text Editor"）
• 编辑该数据类型，在Configuration区域找到Valid Elements（或TinyMCE配置里的Extended Valid Elements）
• 配置允许的标签和属性：比如要允许<div>带内联样式，就写div[style]；要允许<p>设置颜色和字号，写p[style|color|font-size]
• 保存数据类型后，重新编辑内容即可生效

方法2：使用自定义样式表（推荐规范用法） #

• 在项目的wwwroot/css目录下创建自定义样式文件，比如rte-custom-styles.css，写入需要的样式：

  .text-highlight {
      color: #e74c3c;
      font-weight: bold;
  }
  .card-box {
      border: 1px solid #ddd;
      padding: 15px;
      border-radius: 4px;
      background-color: #f8f9fa;
  }
  

• 返回Umbraco后台的RTE数据类型配置，在Stylesheets选项中添加刚才创建的样式文件
• 找到Formats选项，添加对应样式的格式：
  • 格式名称：文本高亮，样式类：text-highlight，关联元素：p
  • 格式名称：卡片容器，样式类：card-box，关联元素：div
• 保存配置后，在RTE编辑界面就能直接选择这些样式，无需手写内联样式，也不会被编辑器清理

方法3：调整全局内容清理规则（进阶，谨慎使用） #

• 若需要更灵活的控制，可修改项目根目录的appsettings.json，找到Umbraco的富文本编辑器配置节点：

  "Umbraco": {
    "CMS": {
      "RichTextEditor": {
        "ValidElements": "*[*]",
        "InvalidElements": ""
      }
    }
  }
  

• 注意：*[*]会关闭所有内容过滤，存在XSS安全风险，仅适合测试环境；生产环境需精确配置允许的元素和属性，避免安全隐患

内容的提问来源于stack exchange，提问作者Vijay