让写作更有“手感”：开源 Tiptap Writing Kit（支持 Vue / React）

普罗米修斯基
79 阅读2分钟

让写作更有“手感”：开源 Tiptap Writing Kit（支持 Vue / React）

如果你在做内容创作平台、AI 写作工具或知识库编辑器，一定遇到过这个问题：功能很全，但“写起来不舒服”。
我最近把自己在项目里沉淀的写作体验能力抽出来，开源了 Tiptap Writing Kit，目标很明确：让写作更顺手、更像在真实写作。

这是一套基于 Tiptap 的增强组件，提供 排版控制、标尺辅助、打字音效/特效、查找替换、选中气泡菜单 等功能，并同时支持 Vue 3 / React。

效果预览

CPT2601261032-1521x782.gif

一句话亮点

  • 面向写作场景：不是通用编辑器，而是“写作体验”增强
  • Vue / React 双端支持，核心能力共享
  • 轻量：按需启用，体验增强不臃肿
  • 可配置：字体、行高、内容宽度、段间距、标尺风格、快捷键、气泡菜单都能改

在线 Demo

建议在电脑端打开，有明显的“写作手感”变化。

功能一览

  • 排版控制：字体/字号/行高/内容宽度/段间距
  • 标尺线：写作时的视觉节奏辅助
  • 打字音效 & 特效：可选的轻量反馈（crisp / drop / typewriter、splash / ripple / mist / fire / cheer）
  • 查找/替换：内置面板 + 快捷键支持
  • 选中气泡菜单：支持自定义按钮、图标与样式
  • 快捷键配置：find / save 等可完全自定义

快速上手

React

npm i tiptap-writing-kit-react

import { InkEditor } from 'tiptap-writing-kit-react'
import 'tiptap-writing-kit-react/style.css'

export default function App() {
  return <InkEditor />
}

Vue 3

npm i tiptap-writing-kit-vue

<script setup lang="ts">
import { InkEditor } from 'tiptap-writing-kit-vue'
import 'tiptap-writing-kit-vue/style.css'
</script>

<template>
  <InkEditor />
</template>

自定义气泡菜单（示例）

React

<InkEditor
  bubbleMenuRender={({ actions, labels, onAction, isActive }) => (
    <>
      {actions.map((action) => (
        <button
          key={action}
          className={`twk-bubble-btn ${isActive(action) ? 'is-active' : ''}`}
          onClick={() => onAction(action)}
        >
          {labels[action]}
        </button>
      ))}
    </>
  )}
/>

Vue

<InkEditor>
  <template #bubble-menu="{ actions, labels, onAction, isActive }">
    <button
      v-for="action in actions"
      :key="action"
      class="twk-bubble-btn"
      :class="{ 'is-active': isActive(action) }"
      @click="onAction(action)"
    >
      {{ labels[action] }}
    </button>
  </template>
</InkEditor>

为什么开源这个组件？

我之前在实际项目中做过 AI 写作平台，发现在“写作体验”上差 1 步，用户就会跳出。
于是把这些体验增强能力抽象成组件，希望帮助更多内容类产品“更像在写作”。

适用场景

  • AI 写作 / 小说创作 / 长文编辑
  • 内容管理后台的编辑器体验升级
  • 知识库、文档编辑工具

仓库地址

路线图（Roadmap）

  • 更丰富的气泡菜单组件与主题
  • 编辑器内的轻量模板系统
  • 可插拔的“写作状态”辅助（字数、段落节奏、节拍）

最后

如果你正在做内容产品，希望写作体验更“像笔尖在纸上”，欢迎试试。
如果你愿意给我一个 Star 或者反馈建议，对项目帮助非常大。

谢谢阅读，欢迎交流！

avatar
文章
阅读
粉丝