element-tiptap
Advanced tools
🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js
A WYSIWYG rich-text editor using tiptap2 and Element Plus for Vue3
that's easy to use, friendly to developers, fully extensible and clean in design.
English | 简体中文
👉https://leecason.github.io/element-tiptap
en, zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he). welcome to contribute more languagescreate, transaction, focus, blur, destroyyarn add element-tiptap
Or
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 ElementTiptap's styles
import 'element-tiptap/lib/style.css';
const app = createApp(App);
// use ElementPlus's plugin
app.use(ElementPlus);
// use this package's plugin
app.use(ElementTiptapPlugin);
// Now you register `'el-tiptap'` component globally.
app.mount('#app');
Or
<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 {
// 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:
DocTextParagraphHeadingBoldItalicStrikeUnderlineLinkImageIframeCodeBlockBlockquoteBulletListOrderedListTaskListTextAlignIndentLineHeightHorizontalRuleHardBreakHistoryTableFormatClearColorHighlightPrintFullscreenSelectAllFontFamilyFontSizeCodeViewYou 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'
<el-tiptap v-model:content="content" />
Type: string
Default: 'html'
Output can be defined to 'html' or 'json'.
<el-tiptap output="json" />
further reading: prosemirror data structure
Type: boolean
Default: false
<el-tiptap readonly />
when readonly is true, editor is not editable.
Type: boolean
Default: false
<el-tiptap spellcheck> </el-tiptap>
Whether the content is spellcheck enabled.
Type: string | number
A string value with unit or a simple value (the default unit is px)：
<el-tiptap :width="700" height="100%"> </el-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>
<el-tiptap :locale="en"></el-tiptap>
</template>
<script setup>
import { ElementTiptap } from 'element-tiptap';
import en from 'element-tiptap/lib/locales/en';
</script>
Available languages:
en(default)zhpl 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>
<el-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.
I am so happy that so many people like this project, and I will do better with your support.
FAQs
🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js
The npm package element-tiptap receives a total of 1,388 weekly downloads. As such, element-tiptap popularity was classified as popular.
We found that element-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.
Security News
OWASP’s 2025 Top 10 introduces Software Supply Chain Failures as a new category, reflecting rising concern over dependency and build system risks.
Research
/Security News
Socket researchers discovered nine malicious NuGet packages that use time-delayed payloads to crash applications and corrupt industrial control systems.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.