@aleatx/tiptap-editor v1.0.3

@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

事件

工具栏按钮

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

文本格式化

代码示例

<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>

标题设置

代码示例

<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>

列表

代码示例

<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>

文本对齐

代码示例

<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>

插入元素

代码示例

<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