先前的两篇文章，我们了解了所见即所得编辑器的原理，接下来，我们就要开始在知晓原理情况下搞点事情了，给所见即所得加持上AI的能力。本文，我们将给所见即所得编辑器，当然是基于Tiptap实现的，增加AI能力，大致分为三个功能点。
AI加持后的所见即所得编辑器功能一撇
- 使用空格键唤起一个与ChatGPT对话的对话框，在基于一个话题对话之后，我们可以选择将对话的内容插入到编辑初，其操作体验如下所示
- 使用
/唤起一个菜单，我们可以选择基于已有的文本进行续写，其大概的体验如下所示：
- 选中一段文字，弹出一个对话框，我们可以基于选中的文字做，
文本扩写，风格改写，文本翻译等等一些操作，其操作体验如下所示：
如何实现这些功能
上面，我们领略了一下AI加持后的Tiptap编辑器的样子，看起来时机已经有点NotionAi的影子了。那么，为啥要自己实现呢？因为Notion 引入 ChatGPT辅助创作，这种体验真的很好，沉浸式的编辑体验，但是缺点也是很大。
- Notion AI的能力太贵了，每个月10美元。
- Notion AI据说是接入的 GPT 3 ，3.5都不愿意给，很坏很坏的，从目前看，这已经是一个比较落后的模型了，而且这么久都没更新过。
- 灵活度不够，不能随意切模型，比如以后我可以切换腾讯的混元大模型，这就意味着我们自己没法基于自己写作风格来fine-tune自己的模型。
说一千，到一万，反正，我们就是得自己造轮子了。
实现 敲击空格，唤起对话框与ChatGPT对话，并插入
实际上，我们首先空格，呼出一个对话框和ChatGPT对话的功能是在 Extension 实现的 addProseMirrorPlugins做的，如下，我们需要监听 event.code === 'Space' 事件，一旦用户敲击空格，就呼出对话框，对话框就的职责就是和ChatGPT对话，最后将对话的内容插入到编辑器editor的光标处即可，整个流程图如下：
其核心代码如下所示。
代码语言：javascript复制addProseMirrorPlugins() {
const editor = this.editor;
const { enableAIChat } = this.options;
return [
new Plugin({
key: new PluginKey('ai-event-handler'),
props: {
handleKeyDown(_, event) {
if (event.code === 'Space') {
const nodeText = getTextContentFromNodes(editor.state.selection.$from);
// 唤起对话框，与ChatGPT对话
// 将对话类容格式化为document，插入到 editor 的focus 处
return false;
}
}
}
})
];
}editor相关API使用是关键
举一个例子，如果你想让选中的文本加粗，是可以这么玩的
代码语言：javascript复制// Execute two commands at once
editor.chain().toggleBold().focus().run()如果我们想在光标处增加内容，比如AI的返回响应，该怎么办呢？
其实很简单，我们看看这个
代码语言：javascript复制// Plain text
editor.commands.insertContent('Example Text')
// HTML
editor.commands.insertContent('<h1>Example Text</h1>')通过editor的commands的insertContent API 去插入内容即可。
所以，整体上来讲，给所见即所得编辑器增加AI加持的能力，无非就是这些API的调用。
那么，后续我们可能还要实现 /，弹出菜单，和实现选中文本弹出菜单，其实现思路和敲击空格键呼出对话框的功能极其类似，就不一一介绍。完整的demo体验可以去utools插件市场，安装 aition体验。
我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！
