在网页中，鼠标右键默认会弹出浏览器的上下文菜单。很多富文本编辑器会替换默认菜单，提供与编辑器语义相关的操作（如插入特殊符号、快速格式化、图片操作、链接编辑等）。本文演示在 Tiptap 中如何拦截右键（contextmenu），阻止默认行为，并显示一个自定义的右键菜单......
在实际项目中，如何读取编辑器内容、把内容传给父组件或后端保存、以及如何实现与父组件双向绑定（v-model）是否重要。本文通过样例演示如何在自定义组件里使用 value prop + input 事件实现双向绑定。 十、获取、绑定编辑器内容 1，创建可复用的 Tiptap 编辑器组件......
iptap 的 BubbleMenu（气泡菜单）是在选中文本时出现的上下文工具栏，体验接近 Word/Notion 的文本选中工具。下面我将通过样例演示如何实现气泡菜单。 九、气泡菜单实现 1，准备工作 （1）首先我们项目总需要安装 Tiptap 基础依赖......
八、实现 HTML 模式、设计模式切换功能 1，准备工作 （1）我们需要在前文的基础上，给自定义的工具栏添加“显示 HTML 代码 ↔ 正常设计编辑”这两种模式切换功能，实现原理如下： 切换到“HTML 模式”时：把 editor.getHTML() 赋值到一个 textarea......
七、实现文字颜色、文字大小、文字字体、文字对齐方式设置 1，准备工作 （1）我们需要在前文的基础上，给自定义的工具栏添加文字颜色设置、文字大小设置、文字字体设置、文字对齐方式设置这三个功能，首先依照前文准备好相关代码。 （2）接着我们还需要安装如下两个扩展......
iptap 是 headless 富文本引擎，即它负责文档模型与命令，但不带 UI。所以我们需要自行实现工具栏（Toolbar／MenuBar）以及工具栏上的各种按钮、下拉框。本文通过样例演示如何是实现一个可复用的工具栏，包括：支持 Element UI 下拉、Tailwind 风格、FontAwesome 图标、激活态与禁用态、下拉/更多菜单、可配置按钮数组......
前文我演示了如何实现一个 Mark 类型的 Highlight 扩展，本文接着以实现一个上传附件扩展为例，演示如何实现 Node + Vue NodeView 类型的扩展。具体来说，创建一个 attachment Node，用来在编辑器中插入文件（非图片）条目。这个 Node 通过 VueNodeViewRenderer 渲染一个 Vue 组件作为 NodeView......
我们可以使用 Tiptap 的扩展机制来自定义或扩展编辑器功能（基于现有扩展定制，或者从头创建 Mark / Node / NodeView）。前文我介绍了如何使用 tiptap 官方提供的@tiptap/extension-highlight 扩展实现高亮功能，本文还是以该功能为例，演示如何手动实现一个自定义高亮（Highlight）的扩展......
Tiptap 的 Highlight 扩展提供一个文本标记功能，可以帮助我们实现富文本编辑器里常见的荧光笔一样高亮文本。下面通过样例进行演示。 三、Highlight 高亮插件安装与使用......
本文演示如何实现图片上传功能，包括如何在 Tiptap 编辑器中插入图片节点、实现本地文件选择上传、把后端或第三方存储返回的 URL 插入到编辑器。 二、图片上传功能实现 1，添加依赖 （1）首先我们项目总需要安装 Tiptap 基础依赖，具体安装方法见上一篇文章： （2）此外，我们还需要安装 @tiptap/extension-image 这个扩展依赖......