@xlatex/tiptap-editor

一个基于 Tiptap 的 Vue 3 富文本编辑器组件，提供了用户友好的工具栏和丰富的编辑功能。

特性

• 基于 Vue 3 和 TypeScript 开发
• 使用 Tiptap 作为编辑器核心
• 内置常用的编辑功能：加粗、斜体、下划线、文本颜色、高亮等
• 支持图片上传和链接插入
• 文本对齐和格式化功能
• 响应式设计，支持移动端

安装

npm install @xlatex/tiptap-editor

使用方法

<template>
  <div>
    <rich-text-editor
      v-model="content"
      placeholder="请输入内容..."
      @change="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RichTextEditor } from '@zhangsheng/tiptap-editor'

const content = ref('')

const handleChange = (html: string) => {
  console.log('编辑器内容已更新:', html)
}
</script>

组件 Props

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | modelValue | string | '' | 编辑器的内容，支持 v-model 双向绑定 | | placeholder | string | '请输入内容...' | 编辑器占位文本 |

事件

| 事件名 | 参数 | 说明 | |--------|------|------| | update:modelValue | (value: string) | 编辑器内容更新时触发 | | change | (html: string, editor: Editor) | 编辑器内容变化时触发，提供更新后的 HTML 内容和编辑器实例 |

工具栏按钮

编辑器工具栏提供了丰富的文本编辑功能，以下是各个按钮的功能说明：

文本格式化

| 按钮 | 功能 | 使用方法 | API调用 | |------|------|----------|--------| | 加粗 | 将选中文本设置为粗体 | 选中文本，点击加粗按钮 | editor.commands.toggleBold() | | 斜体 | 将选中文本设置为斜体 | 选中文本，点击斜体按钮 | editor.commands.toggleItalic() | | 下划线 | 为选中文本添加下划线 | 选中文本，点击下划线按钮 | editor.commands.toggleUnderline() | | 删除线 | 为选中文本添加删除线 | 选中文本，点击删除线按钮 | editor.commands.toggleStrike() |

代码示例

<script setup>
import { useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Underline from '@tiptap/extension-underline'
import Strike from '@tiptap/extension-strike'

const editor = useEditor({
  extensions: [
    StarterKit,
    Underline,
    Strike,
  ],
  content: '<p>选中这段文本应用格式</p>',
})

// 应用加粗格式
const applyBold = () => {
  editor.value.commands.toggleBold()
}

// 应用斜体格式
const applyItalic = () => {
  editor.value.commands.toggleItalic()
}

// 应用下划线格式
const applyUnderline = () => {
  editor.value.commands.toggleUnderline()
}

// 应用删除线格式
const applyStrike = () => {
  editor.value.commands.toggleStrike()
}
</script>

标题设置

| 按钮 | 功能 | 使用方法 | API调用 | |------|------|----------|--------| | 标题1 | 将文本设置为一级标题 | 将光标放在段落中，点击标题1按钮 | editor.commands.toggleHeading({ level: 1 }) | | 标题2 | 将文本设置为二级标题 | 将光标放在段落中，点击标题2按钮 | editor.commands.toggleHeading({ level: 2 }) | | 标题3 | 将文本设置为三级标题 | 将光标放在段落中，点击标题3按钮 | editor.commands.toggleHeading({ level: 3 }) |

代码示例

<script setup>
import { useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const editor = useEditor({
  extensions: [
    StarterKit,
  ],
  content: '<p>这是一个普通段落</p>',
})

// 设置一级标题
const setHeading1 = () => {
  editor.value.commands.toggleHeading({ level: 1 })
}

// 设置二级标题
const setHeading2 = () => {
  editor.value.commands.toggleHeading({ level: 2 })
}

// 设置三级标题
const setHeading3 = () => {
  editor.value.commands.toggleHeading({ level: 3 })
}

// 恢复为普通段落
const setParagraph = () => {
  editor.value.commands.setParagraph()
}
</script>

列表

| 按钮 | 功能 | 使用方法 | API调用 | |------|------|----------|--------| | 无序列表 | 创建无序列表 | 将光标放在段落中，点击无序列表按钮 | editor.commands.toggleBulletList() | | 有序列表 | 创建有序列表 | 将光标放在段落中，点击有序列表按钮 | editor.commands.toggleOrderedList() |

代码示例

<script setup>
import { useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'

const editor = useEditor({
  extensions: [
    StarterKit,
  ],
  content: '<p>这是一个普通段落</p>',
})

// 切换无序列表
const toggleBulletList = () => {
  editor.value.commands.toggleBulletList()
}

// 切换有序列表
const toggleOrderedList = () => {
  editor.value.commands.toggleOrderedList()
}

// 增加列表缩进
const increaseIndent = () => {
  editor.value.commands.sinkListItem('listItem')
}

// 减少列表缩进
const decreaseIndent = () => {
  editor.value.commands.liftListItem('listItem')
}
</script>

文本对齐

| 按钮 | 功能 | 使用方法 | API调用 | |------|------|----------|--------| | 左对齐 | 将文本左对齐 | 将光标放在段落中，点击左对齐按钮 | editor.commands.setTextAlign('left') | | 居中对齐 | 将文本居中对齐 | 将光标放在段落中，点击居中对齐按钮 | editor.commands.setTextAlign('center') | | 右对齐 | 将文本右对齐 | 将光标放在段落中，点击右对齐按钮 | editor.commands.setTextAlign('right') |

代码示例

<script setup>
import { useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import TextAlign from '@tiptap/extension-text-align'

const editor = useEditor({
  extensions: [
    StarterKit,
    TextAlign.configure({
      types: ['heading', 'paragraph'],
      alignments: ['left', 'center', 'right'],
      defaultAlignment: 'left',
    }),
  ],
  content: '<p>这是一个普通段落</p>',
})

// 设置左对齐
const setLeftAlign = () => {
  editor.value.commands.setTextAlign('left')
}

// 设置居中对齐
const setCenterAlign = () => {
  editor.value.commands.setTextAlign('center')
}

// 设置右对齐
const setRightAlign = () => {
  editor.value.commands.setTextAlign('right')
}

// 取消文本对齐设置
const unsetTextAlign = () => {
  editor.value.commands.unsetTextAlign()
}
</script>

插入元素

| 按钮 | 功能 | 使用方法 | API调用 | |------|------|----------|--------| | 插入链接 | 为选中文本添加超链接 | 选中文本，点击链接按钮，在弹出的对话框中输入URL | editor.commands.setLink({ href: 'https://example.com' }) | | 插入图片 | 在光标位置插入图片 | 点击图片按钮，在弹出的对话框中输入图片URL | editor.commands.setImage({ src: 'image-url.jpg' }) | | 插入下拉选择 | 在光标位置插入下拉选择框 | 点击下拉选择按钮，插入默认的下拉选择框 | editor.commands.setSelectNode() | | 插入输入标签 | 在光标位置插入输入标签 | 点击输入标签按钮，插入默认的输入标签 | editor.commands.setInputLabel({ placeholder: '请输入文本...' }) |

代码示例

<script setup>
import { useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Link from '@tiptap/extension-link'
import Image from '@tiptap/extension-image'
import { SelectNode } from './lib/extensions/nodes/select-node/SelectNode'

const editor = useEditor({
  extensions: [
    StarterKit,
    Link.configure({
      openOnClick: true,
      linkOnPaste: true,
    }),
    Image,
    SelectNode,
  ],
  content: '<p>这是一个普通段落</p>',
})

// 插入链接
const insertLink = () => {
  const url = prompt('请输入链接URL')
  if (url) {
    editor.value.commands.setLink({ href: url })
  }
}

// 插入图片
const insertImage = () => {
  const url = prompt('请输入图片URL')
  if (url) {
    editor.value.commands.setImage({ src: url })
  }
}

// 插入下拉选择框
const insertSelectNode = () => {
  editor.value.commands.setSelectNode({
    options: [
      { value: 'option1', label: '选项1' },
      { value: 'option2', label: '选项2' },
      { value: 'option3', label: '选项3' },
    ]
  })
}

// 插入输入标签
const insertInputLabel = () => {
  editor.value.commands.setInputLabel({
    placeholder: '请输入文本...'
  })
}
</script>

开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库文件
npm run build:lib

License

MIT