
Product
Secure Your AI-Generated Code with Socket MCP
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
🌸A modern WYSIWYG rich-text editor using tiptap and Ant-Design UI for Vue.js
English | 简体中文
yarn add ant-tiptap
Or
npm install --save ant-tiptap
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
<template>
<a-tiptap ...></a-tiptap>
</template>
<script setup>
import { AntTiptap } from 'ant-tiptap';
</script>
<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>
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.
Type: string
Default: ''
When editor is empty, placeholder will display.
<el-tiptap placeholder="Write something …" />
Type: string
Default: ''
Editor's content
<el-tiptap :content="content" @onUpdate="onEditorUpdate" />
or Use 'v-model'
<a-tiptap v-model:content="content" />
Type: string
Default: 'html'
Output can be defined to 'html'
or 'json'
.
<a-tiptap output="json" />
further reading: prosemirror data structure
Type: boolean
Default: false
<a-tiptap readonly />
when readonly
is true
, editor is not editable.
Type: boolean
Default: false
<a-tiptap spellcheck> </a-tiptap>
Whether the content is spellcheck enabled.
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%;
Type: boolean
Default: true
Enables or disables the display of the character counter.
Type: boolean
Default: true
Control if tooltips are shown when getting with mouse over the buttons from the toolbar.
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 @FurtakMru
by @baitkulde
by @Thesicstarko
by @Hotbrainses
by @koaszh_tw
by @eric0324fr
by @LPABelgiumpt_br
by @valterleonardonl
by @Arne-Janhe
by @shovalPMSWelcome contribution.
<template>
<a-tiptap @onCreate="onCreate" />
</template>
<script setup>
/**
* the tiptap editor instance
* see https://tiptap.dev/api/editor
*/
const onCreate = ({ editor }) => {
// ...
};
</script>
The same as onCreate
Please see CONTRIBUTING for details.
FAQs
🌸A modern WYSIWYG rich-text editor using tiptap and Ant-Design UI for Vue.js
The npm package ant-tiptap receives a total of 1 weekly downloads. As such, ant-tiptap popularity was classified as not popular.
We found that ant-tiptap demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Product
Socket MCP brings real-time security checks to AI-generated code, helping developers catch risky dependencies before they enter the codebase.
Security News
As vulnerability data bottlenecks grow, the federal government is formally investigating NIST’s handling of the National Vulnerability Database.
Research
Security News
Socket’s Threat Research Team has uncovered 60 npm packages using post-install scripts to silently exfiltrate hostnames, IP addresses, DNS servers, and user directories to a Discord-controlled endpoint.