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

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

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

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

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

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

工具栏定位

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

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

加粗/取消加粗

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

斜体/取消斜体

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

下划线/取消下划线

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

删除线/取消删除线

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

设置字体

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

设置字号

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

设置文字颜色

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

设置文字背景颜色

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

清除样式

mindMap.richText.removeFormat()

完整示例