Appearance
vx-tiptap-editor 富文本编辑器
基本用法
属性继承机制
编辑器现在支持统一的属性管理机制:
1. 全局属性配置
通过 HtmlView
扩展的 allowedAttributes
选项,可以全局控制所有支持的扩展允许哪些 HTML 属性:
javascript
{
name: 'HtmlView',
options: {
allowedAttributes: ['class', 'style', 'id', 'data-testid', 'title', 'aria-label']
}
}
2. 自动继承
支持属性继承的扩展(如 Heading
、Blockquote
)会自动从全局配置中继承 allowedAttributes
,无需单独配置。
3. 局部覆盖
如果需要为特定扩展设置不同的属性配置,可以在扩展的选项中单独指定:
javascript
{
name: 'Heading',
options: {
allowedAttributes: ['class', 'id'] // 覆盖全局配置
}
}
4. 支持的扩展
目前支持属性继承的扩展包括:
Heading
- 标题元素Blockquote
- 引用块元素- 更多扩展正在逐步支持中...
5. 使用示例
- 在富文本模式下创建标题或引用块
- 切换到 HTML 视图模式
- 手动添加配置的属性(如
class
、style
、data-testid
等) - 切换回富文本模式 - 属性会被保留