随着生成式 AI 在三维建模领域的快速发展，市面上出现了许多能够将一张二维图片在短时间内自动生成带纹理的可用 3D 资产的工具。前文我介绍了 Hyper3D/Deemos 提供的 AI 3D 模型生成器 Ridon，本文我接着推荐一款国内的 AI 3D 模型生成工具：腾讯混元 3D......
近几年，AI 已经把“将一张平面图片瞬间变成 3D 模型”从科幻变成了现实。Rodin 就是这样一款能把单张或多张 2D 图片快速生成可导出的 3D 资产的在线工具。下面我将演示如何使用 Rodin 一键把 2D 图片变成可用的 3D 模型。 1，基本介绍 （1）Rodin 是 Hyper3D/Deemos 提供的 AI 3D 模型生成器......
有时我们需要导出 Tiptap 内容为 Word (.docx），本文演示如何借助 html-docx-js + FileSaver 来快速实现纯前端导出，以及通过后端进行导出这两种方法。 十三、将内容导出为 Word（客户端导出） 1，安装依赖 要实现客户端导出，我们需要先安装 html-docx-js 和 file-saver 这两个依赖库......
表格是许多编辑器必备的功能。Tiptap 提供了 Table / TableKit 等扩展，能让你在编辑器里插入/编辑/操作表格（增删行列、合并拆分单元格、切换表头、单元格属性等）。下面我将通过样例进行演示。 十二、添加表格功能 1，安装表格扩展 （1）要使用表格功能，首先我们需要安装表格扩展......
在网页中，鼠标右键默认会弹出浏览器的上下文菜单。很多富文本编辑器会替换默认菜单，提供与编辑器语义相关的操作（如插入特殊符号、快速格式化、图片操作、链接编辑等）。本文演示在 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 图标、激活态与禁用态、下拉/更多菜单、可配置按钮数组......