AIEditor项目：自定义气泡菜单中的AI功能按钮实现指南

AIEditor项目：自定义气泡菜单中的AI功能按钮实现指南

【免费下载链接】aieditor AiEditor is a next-generation rich text editor for AI. (AiEditor 是一个面向 AI 的下一代富文本编辑器。) 项目地址: https://gitcode.com/gh_mirrors/ai/aieditor

背景介绍

AIEditor作为一款现代化的富文本编辑器，提供了强大的文本编辑和AI辅助功能。在最新版本中，开发团队增强了气泡菜单的自定义能力，特别是针对AI功能按钮的配置选项。这项改进使得开发者能够更灵活地将常用AI操作直接放置在工具栏中，提升编辑效率。

核心功能解析

基础配置结构

AIEditor的气泡菜单配置通过textSelectionBubbleMenu对象实现，其中items数组定义了菜单中显示的按钮项。开发者可以通过简单的配置添加预定义的AI功能或自定义操作：

textSelectionBubbleMenu: {
    enable: true,
    items: [
        "ai", // 内置AI按钮
        "translate", // 内置翻译按钮
        // 自定义AI按钮
        {
            prompt: "自定义提示词模板...",
            icon: "<svg>...</svg>",
            title: '按钮标题'
        }
    ]
}

自定义AI按钮参数详解

1. prompt：定义发送给AI的提示词模板，支持{content}占位符自动替换为选中文本
2. icon：支持SVG格式的按钮图标定义
3. title：按钮的标题文本，支持国际化键值（如$i18n_rewrite）

高级应用场景

专业写作辅助按钮配置

以下配置示例展示了如何添加专业写作辅助按钮，包括文本优化、精简、扩展等功能：

{
    prompt: `请重写以下内容，使其更简洁专业，保持原意和语言...\n{content}`,
    icon: `<svg>...</svg>`,
    title: 'improve-writing'
}

多语言支持实现

通过国际化键值，可以轻松实现按钮标题的多语言支持：

{
    prompt: "...",
    icon: "...",
    title: '$i18n_professionalize' // 对应国际化配置中的键值
}

技术实现要点

1. SVG图标支持：所有自定义按钮都支持内联SVG定义，确保图标显示的高质量和灵活性
2. 提示词模板：支持动态内容插入，{content}会被自动替换为用户选中的文本
3. 响应式设计：按钮会根据工具栏空间自动调整布局，确保在不同设备上的良好体验

最佳实践建议

1. 保持提示词明确：为每个自定义按钮编写清晰、具体的提示词，确保AI理解操作意图
2. 图标设计一致性：自定义SVG图标应保持相似的视觉风格和尺寸
3. 功能分类组织：将相关功能按钮分组放置，提高用户操作效率
4. 性能考虑：避免在单个菜单中添加过多按钮，影响渲染性能

总结

AIEditor的气泡菜单AI功能自定义能力为开发者提供了极大的灵活性，使得文本编辑体验更加个性化和高效。通过合理配置，可以打造出适合各种专业场景的智能写作助手，满足从内容创作到技术文档编写的多样化需求。

【免费下载链接】aieditor AiEditor is a next-generation rich text editor for AI. (AiEditor 是一个面向 AI 的下一代富文本编辑器。) 项目地址: https://gitcode.com/gh_mirrors/ai/aieditor