ant-tiptap

Base

tiptap Element-Tiptap

📔 Languages

English | 简体中文

📦 Installation

NPM

yarn add ant-tiptap

Or

npm install --save ant-tiptap

Install plugin

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import AntTiptapPlugin from 'ant-tiptap';

const app = createApp(App);

// use Antd's plugin
app.use(Antd);
// use this package's plugin
app.use(AntTiptapPlugin);
// Now you register `'a-tiptap'` component globally.

app.mount('#app');

Or

Partial import

<template>
  <a-tiptap ...></a-tiptap>
</template>

<script setup>
import { AntTiptap } from 'ant-tiptap';
</script>

🚀 Usage

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

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

// editor extensions
// they will be added to menubar and bubble menu by the order you declare.
const extensions = [
  Doc,
  Text,
  Paragraph,
  Heading.configure({ level: 5 }),
  Bold.configure({ bubble: true }), // render command-button in bubble menu.
  Underline.configure({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
  Italic,
  Strike,
  BulletList,
  OrderedList,
];

// editor's content
const content = ref(`
  <h1>Heading</h1>
  <p>This Editor is awesome!</p>
`);
</script>

📔 Props

extensions

Type: Array

You can use the necessary extensions. The corresponding command-buttons will be added by declaring the order of the extension.

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

You can find all extensions docs here.

You can customize the extension. See Custom extensions.

placeholder

Type: string

Default: ''

When editor is empty, placeholder will display.

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

content

Type: string

Default: ''

Editor's content

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

or Use 'v-model'

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

output

Type: string

Default: 'html'

Output can be defined to 'html' or 'json'.

<a-tiptap output="json" />

further reading: prosemirror data structure

readonly

Type: boolean

Default: false

<a-tiptap readonly />

when readonly is true, editor is not editable.

spellcheck

Type: boolean

Default: false

<a-tiptap spellcheck> </a-tiptap>

Whether the content is spellcheck enabled.

width, height

Type: string | number

A string value with unit or a simple value (the default unit is px)：

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

The above example will be converted to:

width: 700px;
height: 100%;

enableCharCount

Type: boolean

Default: true

Enables or disables the display of the character counter.

tooltip

Type: boolean

Default: true

Control if tooltips are shown when getting with mouse over the buttons from the toolbar.

locale

Specifies the editor i18n language.

<template>
  <a-tiptap :locale="en"></a-tiptap>
</template>

<script setup>
import { AntTiptap } from 'ant-tiptap';
import en from 'ant-tiptap/lib/locales/en';
</script>

Available languages:

• en(default)
• 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

Welcome contribution.

👽 Events

onCreate

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

<script setup>
/**
 * the tiptap editor instance
 * see https://tiptap.dev/api/editor
 */
const onCreate = ({ editor }) => {
  // ...
};
</script>

onTransaction, onFocus, onBlur, onDestroy

The same as onCreate

🏗 Contributing

Please see CONTRIBUTING for details.

📝 Changelog

Changelog

📄 License

MIT