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
- 🎨Use element-plus components
- 💅Many out of box extensions (welcome to submit an issue for feature request👏)
- 🔖Markdown support
- 📘TypeScript support
- 🌐I18n support(
en,zh,pl,ru,de,ko,es,zh_tw,fr,pt_br,nl,he). welcome to contribute more languages - 🎈Events you might use:
create,transaction,focus,blur,destroy - 🍀Fully extensible, you can customize editor extension and its menu button view
- 💻Also can control the behavior of the editor directly, customize the editor for yourself.
yarn add element-tiptapOr
npm install --save element-tiptapimport { 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:
DocTextParagraphHeadingBoldItalicStrikeUnderlineLinkImageIframeCodeBlockBlockquoteBulletListOrderedListTaskListTextAlignIndentLineHeightHorizontalRuleHardBreakHistoryTableFormatClearColorHighlightPrintFullscreenSelectAllFontFamilyFontSizeCodeView
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'
<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)zhplby @FurtakMruby @baitkuldeby @Thesicstarkoby @Hotbrainsesby @koaszh_twby @eric0324frby @LPABelgiumpt_brby @valterleonardonlby @Arne-Janheby @shovalPMS
Welcome 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.
![dependabot-preview[bot] avatar](https://avatars.githubusercontent.com/in/2141?v=4 "dependabot-preview[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
