🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
DemoInstallSign in
Socket

ant-tiptap

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ant-tiptap

🌸A modern WYSIWYG rich-text editor using tiptap and Ant-Design UI for Vue.js

1.0.6
latest
Source
npm
Version published
Weekly downloads
1
-50%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

editor

FAQs

Package last updated on 28 Feb 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts