Kiann Editor

一个基于 Tiptap 的功能丰富的 Vue 3 富文本编辑器。

特性

• 📝 完整的文本编辑功能（加粗、斜体、下划线、删除线、上划线）
• 🎨 自定义字体和字号
• 🌈 文本颜色和背景高亮
• 🔗 超链接和自定义条件
• 📐 文本对齐（左对齐、居中、右对齐、两端对齐）
• 📊 表格支持（合并单元格、拆分单元格、背景色、垂直对齐）
• 📋 列表支持（有序列表、无序列表）
• ⚡ 基于 Vue 3 和 Tiptap 构建
• 🎯 完全可定制

安装

npm install kiann-editor

或者

yarn add kiann-editor

使用

Vite / Vue CLI 项目

全局注册

import { createApp } from 'vue'
import KiannEditorPlugin from 'kiann-editor'
import 'kiann-editor/style.css'

const app = createApp(App)
app.use(KiannEditorPlugin)
app.mount('#app')

按需导入

<template>
  <div>
    <KiannEditor v-model="content" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { KiannEditor } from 'kiann-editor'
import 'kiann-editor/style.css'

const content = ref('<p>Hello World!</p>')
</script>

Webpack 项目

对于使用 Webpack 的旧项目，kiann-editor 完全兼容。

全局注册（main.js）

import Vue from 'vue'
import { createApp } from 'vue'
import KiannEditorPlugin from 'kiann-editor'
import 'kiann-editor/style.css'

const app = createApp(App)
app.use(KiannEditorPlugin)
app.mount('#app')

按需导入

<template>
  <div>
    <KiannEditor v-model="content" />
  </div>
</template>

<script>
import { KiannEditor } from 'kiann-editor'
import 'kiann-editor/style.css'

export default {
  components: {
    KiannEditor
  },
  data() {
    return {
      content: '<p>Hello World!</p>'
    }
  }
}
</script>

Webpack 配置建议

如果遇到构建问题，请确保 webpack.config.js 中包含 Vue 的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json']
  }
}

Props

| 参数 | 类型 | 默认值 | 说明 | |------|------|--------|------| | modelValue | String | '' | 编辑器内容（HTML格式） |

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | update:modelValue | 编辑器内容变化时触发 | (html: string) |

依赖

• Vue 3.2+
• @tiptap/vue-3
• @tiptap/starter-kit
• lucide-vue-next

License

MIT