写tinymce插件：ruby标签

下面是一个 TinyMCE 插件的完整示例，用于插入 `<ruby>` 标签。该插件会在工具栏中添加一个按钮，点击后弹出对话框，包含两个输入框（内容和拼音），提交后会将 `<ruby>` 标签插入到当前光标位置。

---

### ✅ 文件结构说明

你需要创建一个 TinyMCE 插件文件夹，例如：

```
tinymce/plugins/ruby/
  └── plugin.js
```

---

### 📄 `plugin.js` 内容如下：

```javascript
(function () {
  tinymce.PluginManager.add('ruby', function (editor, url) {
    // 添加按钮到工具栏
    editor.ui.registry.addButton('ruby', {
      text: '插入注音',
      icon: false,
      onAction: function () {
        // 打开对话框
        editor.windowManager.open({
          title: '插入 Ruby 注音',
          body: {
            type: 'panel',
            items: [
              {
                type: 'input',
                name: 'content',
                label: '文本内容'
              },
              {
                type: 'input',
                name: 'rt',
                label: '拼音'
              }
            ]
          },
          buttons: [
            {
              type: 'cancel',
              text: '取消'
            },
            {
              type: 'submit',
              text: '插入',
              primary: true
            }
          ],
          onSubmit: function (api) {
            const data = api.getData();
            const rubyHtml = `<ruby>${data.content}<rt>${data.rt}</rt></ruby>`;
            editor.insertContent(rubyHtml);
            api.close();
          }
        });
      }
    });
  });
})();
```

---

### 🛠️ 在初始化 TinyMCE 时启用插件

在你的 TinyMCE 初始化代码中加入这个插件：

```html
<script>
  tinymce.init({
    selector: '#mytextarea',
    plugins: 'ruby', // 启用 ruby 插件
    toolbar: 'ruby', // 将按钮添加到工具栏
    menubar: false
  });
</script>
```

---

### ✅ 效果演示

当你点击工具栏中的“插入注音”按钮后，会弹出一个对话框，输入“文本内容”和“拼音”，例如：

- 文本内容：你好
- 拼音：nǐ hǎo

点击“插入”后，编辑器中会插入：

```html
<ruby>你好<rt>nǐ hǎo</rt></ruby>
```

---

### 🎨 可选扩展功能

你可以进一步增强这个插件：

- 添加图标（icon）
- 支持修改已有 `<ruby>` 内容
- 支持中文标注（如使用 `<rp>`）

如果你需要这些扩展功能，也可以告诉我，我可以帮你继续完善。

--- 

是否还需要支持 Vue、React 或其他框架环境下的 TinyMCE 集成？