Skip to content

Latest commit

 

History

History
362 lines (257 loc) · 7.21 KB

README_ZH.md

File metadata and controls

362 lines (257 loc) · 7.21 KB
Raw

ElTiptap logo

npm GitHub Release Date npm peer dependency version semantic-release GitHub

Element Tiptap Editor

一个 Vue3 的基于 tiptap 和 Element Plus 的 「所见即所得」 富文本编辑器

易上手，对开发者友好，可扩展性强，设计简洁

📔 选择语言

English | 简体中文

🎄 Demo

👉https://leecason.github.io/element-tiptap

👾Code Sandbox

✨ 特色

  • 🎨 使用 element-plus 组件
  • 💅 许多开箱即用的 extension (欢迎提交 issue 为新的 feature 留下建议 👏)
  • 🔖 支持 markdown 语法
  • 📘TypeScript 支持
  • 🌐 支持 i18n(en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he). 欢迎贡献更多的语言
  • 🎈 可用的 events: create, transaction, focus, blur, destroy
  • 🍀 高度自定义, 你可以自定义 extension 和它对应的菜单按钮视图
  • 💻 也可以通过直接控制编辑器的行为来定制编辑器。

📦 安装

通过 NPM

yarn add element-tiptap

或者

npm install --save element-tiptap

安装插件

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ElementTiptapPlugin from 'element-tiptap';
// import element-tiptap 样式
import 'element-tiptap/lib/style.css';

// 安装 ElementUI 插件
app.use(ElementPlus);
// 安装 element-tiptap 插件
app.use(ElementTiptapPlugin);
// 现在你已经在全局注册了 `el-tiptap` 组件。

app.mount('#app');

或者

局部引入

<template>
  <el-tiptap ...><el-tiptap>
</template>

<script setup>
import { ElementTiptap } from 'element-tiptap';
</script>

🚀 用法

<template>
  <el-tiptap v-model:content="content" :extensions="extensions" />
</template>

<script setup>
import { ref } from 'vue';
import {
  // 需要的 extensions
  Doc,
  Text,
  Paragraph,
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  BulletList,
  OrderedList,
} from 'element-tiptap';

// 编辑器的 extensions
// 它们将会按照你声明的顺序被添加到菜单栏和气泡菜单中
const extensions = [
  Doc,
  Text,
  Paragraph,
  Heading.configure({ level: 5 }),
  Bold.configure({ bubble: true }), // 在气泡菜单中渲染菜单按钮
  Underline.configure({ bubble: true, menubar: false }), // 在气泡菜单而不在菜单栏中渲染菜单按钮
  Italic,
  Strike,
  BulletList,
  OrderedList,
];

// 编辑器的内容
const content = ref(`
  <h1>Heading</h1>
  <p>This Editor is awesome!</p>
`);
</script>

📔 Props

扩展 extensions

类型: Array

你可以只使用需要的 extension，对应的菜单按钮将会按照你声明的顺序被添加。

所有可用的 extensions:

  • Doc
  • Text
  • Paragraph
  • Heading
  • Bold
  • Italic
  • Strike
  • Underline
  • Link
  • Image
  • Iframe
  • CodeBlock
  • Blockquote
  • BulletList
  • OrderedList
  • TaskList
  • TextAlign
  • Indent
  • LineHeight
  • HorizontalRule
  • HardBreak
  • History
  • Table
  • FormatClear
  • Color
  • Highlight
  • Print
  • Fullscreen
  • SelectAll
  • FontFamily
  • FontSize
  • CodeView

查看所有 extensions 的文档

你可以自定义 extension. 查看 Custom extensions.

占位符 placeholder

类型: string

默认值: ''

当编辑器没有内容的时候，将会显示 placeholder。

<el-tiptap placeholder="Write something …" />

内容 content

类型: string

默认值: ''

编辑器的内容

<el-tiptap :content="content" @onUpdate="onEditorUpdate" />

或者使用 'v-model'

<el-tiptap v-model:content="content" />

输出 output

类型: string

默认值: 'html'

可被定义为 'html'(默认) 或者 'json'.

<el-tiptap output="json" />

进一步了解: prosemirror 数据结构

readonly

类型: boolean

默认值: false

<el-tiptap readonly />

当 readonly 为 true, 编辑器不可编辑。

spellcheck

类型: boolean

默认值: 插件 spellcheck 配置项的值

<el-tiptap spellcheck> </el-tiptap>

编辑器内容是否开启拼写检查。

width, height

类型: string | number

带单位的字符串值，无单位的值会将 px 作为单位:

<el-tiptap :width="700" height="100%"> </el-tiptap>

上例会被转换为:

width: 700px;
height: 100%;

showMenubar

类型: boolean

默认值: true

是否显示 menubar

enableCharCount

类型: boolean

默认值: true

是否显示字数统计

tooltip

类型: boolean

默认值: true

鼠标移到按钮上时是否显示 tooltip

locale

指定编辑器国际化语言

<template>
  <el-tiptap :locale="zh"></el-tiptap>
</template>

<script setup>
import { ElementTiptap } from 'element-tiptap';
import zh from 'element-tiptap/lib/locales/zh';
</script>

可用的语言:

  • en(默认)
  • zh
  • pl by @FurtakM
  • ru by @baitkul
  • de by @Thesicstar
  • ko by @Hotbrains
  • es by @koas
  • zh_tw by @eric0324
  • fr by @LPABelgium
  • pt_br by @valterleonardo
  • nl by @Arne-Jan
  • he by @shovalPMS

欢迎贡献更多的语言.

👽 事件 Events

onCreate

<template>
  <el-tiptap @onCreate="onCreate" />
</template>

<script setup>
/**
 * tiptap editor 实例
 * 阅读 https://tiptap.scrumpy.io/docs/guide/editor.html
 */
const onCreate = ({ editor }) => {
  // ...
};
</script>

onTransaction, onFocus, onBlur, onDestroy

用法与 init 相同

🏗 贡献代码

详细信息见 CONTRIBUTING

📝 更新日志

更新日志

📄 许可证

MIT

💝 Buy Me A Coffee

看到这么多人喜欢这个项目我非常开心，有了你们的支持我会做的更好。

reward Buy Me A Coffee