# 如何渲染富文本的悬浮工具栏

> 要支持节点富文本编辑需要使用富文本插件

如果开启了节点富文本编辑，那么可以对节点内的部分文本应用样式，一般当选中文本时上方会出现一个工具栏，有加粗、斜体、改变颜色等等的按钮。

首先要监听`rich_text_selection_change`事件，也就是选中文本的事件：

```js
mindMap.on('rich_text_selection_change', (hasRange, rect, formatInfo) => {
    // hasRange（是否存在选区）
    // rectInfo（选区的尺寸和位置信息）
    // formatInfo（选区的文本格式化信息）
    // 显示你的工具栏
})
```

可以通过`hasRange`来判断是否显示工具栏，工具栏的位置可以通过`rectInfo`获取，通过`formatInfo`可以获取当前选中文本的样式信息，比如已经被加粗了，那么你的加粗按钮就可以渲染为激活状态。

### 工具栏定位

```js
let left = rect.left + rect.width / 2 + 'px'
let top = rect.top - 60 + 'px'
```

计算出来的是相对于浏览器窗口左上角的位置，所以你的工具栏元素最好是添加在body元素下面，并且使用固定定位或相对定位，另外`z-index`的属性最好也设置的高一点，否则在弹窗等场景下可能会被挡住。

### 加粗/取消加粗

```js
mindMap.richText.formatText({
    bold: true/false
})
```

### 斜体/取消斜体

```js
mindMap.richText.formatText({
    italic: true/false
})
```

### 下划线/取消下划线

```js
mindMap.richText.formatText({
    underline: true/false
})
```

### 删除线/取消删除线

```js
mindMap.richText.formatText({
    strike: true/false
})
```

### 设置字体

```js
mindMap.richText.formatText({
    font: '宋体, SimSun, Songti SC'
})
```

### 设置字号

```js
mindMap.richText.formatText({
    font: 16 + 'px'
})
```

### 设置文字颜色

```js
mindMap.richText.formatText({
    color: '#fff'
})
```

### 设置文字背景颜色

```js
mindMap.richText.formatText({
    background: '#fff'
})
```

### 清除样式

```js
mindMap.richText.removeFormat()
```

## 完整示例

<iframe style="width: 100%; height: 455px; border: none;" src="https://wanglin2.github.io/playground/# " />