In what scenarios do you need this function?

当进行语言学习的时候(中文生字或者日文汉字)，需要在文本中对文字进行注音以方便阅读记忆，效果如下：

我们来看看 北（bei） 京（jing） 的注音方法

这个是可以通过原生的HTML标签就能实现的，不需要任何JS和CSS样式：

<ruby>
北<rp>（</rp><rt>bei</rt><rp>）</rp>
京<rp>（</rp><rt>jing</rt><rp>）</rp>
</ruby>

tag标签的一些说明：

• <ruby> — 用它将需要注释或注音标的文字内容包围住。
• <rt> — 这里面放置音标或注释，这个标记要跟在需要注释的文本后边。
• <rp> — (完全不用在思源中考虑)这个标记是防备那些不支持ruby标记的浏览器，主要用来放置括弧。对于支持这个标记的浏览器，rp标记的CSS样式是{display:none;}，也就是不可见。

希望可以在工具栏里面增加一个按钮，用来标注选中的文本注音

然后弹出来类似公式那样的输入框，把标注输进去，以<ruby>标签进行数据保存并渲染

参考：
HTML拼音/音标注释标记ruby和它的子元素rt/rp