element-tiptap
Advanced tools
🌸A modern WYSIWYG rich-text editor using tiptap and Element UI for Vue.js
A WYSIWYG rich-text editor using tiptap and Element UI for Vue.js
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). welcome to contribute more languagesinit, transaction, focus, blur, paste, drop, updateyarn add element-tiptap
Or
npm install --save element-tiptap
import Vue from 'vue';
import ElementUI from 'element-ui';
import { ElementTiptapPlugin } from 'element-tiptap';
// import ElementUI's styles
import 'element-ui/lib/theme-chalk/index.css';
// import this package's styles
import 'element-tiptap/lib/index.css';
// use ElementUI's plugin
Vue.use(ElementUI);
// use this package's plugin
Vue.use(ElementTiptapPlugin, { /* plugin options */ });
// Now you register `'el-tiptap'` component globally.
Default plugin options:
{
lang: "en", // see i18n
spellcheck: true, // can be overwritten by editor prop
}
Or
<template>
<div>
<el-tiptap ...><el-tiptap>
</div>
</template>
<script>
import { ElementTiptap } from 'element-tiptap';
export default {
components: {
'el-tiptap': ElementTiptap,
},
};
</script>
You can declare when you install the plugin.
Vue.use(ElementTiptapPlugin, {
lang: 'zh',
});
Available languages:
en(default)zhpl by @FurtakMru by @baitkulde by @Thesicstarko by @Hotbrainses by @koaszh_tw by @eric0324fr by @LPABelgiumWelcome contribution.
<template>
<div>
<el-tiptap
v-model="content"
:extensions="extensions"
/>
</div>
</template>
<script>
import {
// necessary extensions
Doc,
Text,
Paragraph,
Heading,
Bold,
Underline,
Italic,
Strike,
ListItem,
BulletList,
OrderedList,
} from 'element-tiptap';
export default {
data () {
// editor extensions
// they will be added to menubar and bubble menu by the order you declare.
extensions: [
new Doc(),
new Text(),
new Paragraph(),
new Heading({ level: 5 }),
new Bold({ bubble: true }), // render command-button in bubble menu.
new Underline({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
new Italic(),
new Strike(),
new ListItem(),
new BulletList(),
new OrderedList(),
],
// editor's content
content: `
<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:
DocTextParagraphHeadingBoldItalicStrikeUnderlineLinkImageIframeCodeBlockBlockquoteListItemBulletList (use with ListItem)OrderedList (use with ListItem)TodoItemTodoList (use with TodoItem)TextAlignIndentLineHeightHorizontalRuleHardBreakTrailingNodeHistoryTable (use with TableHeader, TableCell, TableRow)TableHeaderTableCellTableRowFormatClearTextColorTextHighlightPreviewPrintFullscreenSelectAllFontTypeFontSizeCodeView (🆕)You can find all extensions docs here.
You can customize the extension menu button view
// create your extension file
import { Bold } from 'element-tiptap';
export default class CustomBold extends Bold {
menuBtnView (editorContext) {
// editorContext contains some properties that are useful to you, such as isActive, commands, etc
// more detailed docs check this https://github.com/scrumpy/tiptap#editormenubar
// this package append editor instance to editorContext
return {
component: CustomButton, // your component
componentProps: { // bind to your component with v-bind
...
},
componentEvents: { // bind to your component with v-on
...
},
},
}
}
<template>
<el-tiptap :extensions="extensions" />
</template>
<script>
import CustomBold from '...'; // import your extension
export default {
...
data () {
return {
extensions: [
...
new CustomBold(),
],
};
},
};
</script>
Here is the example of how to create your extension button view (an extension can also render multiple menu buttons).
Type: Object
Default: {}
Tiptap Editor properties (passed to the constructor).
see the full list of properties here.
editorProps is a powerful prop in this list, you can use this prop to control the behavior of the editor directly, customize the editor for yourself.
❗not available properties❗(they are used in this package):
contenteditableuseBuiltInExtensionsextensionsonInitOnFocusonBluronUpdateType: 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"
/>
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="true"
/>
when readonly is true, editor is not editable.
Type: boolean
Default: plugin spellcheck option value
<el-tiptap
:spellcheck="true"
>
</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 menubar.
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.
Type: string
Default: plugin lang option value
<el-tiptap
lang="zh"
>
</el-tiptap>
Specifies the editor i18n language.
<template>
<el-tiptap
@onInit="onInit"
/>
</template>
<script>
export default {
...
methods: {
/*
* the tiptap editor instance
* see https://tiptap.scrumpy.io/docs/guide/editor.html
*/
onInit ({ editor }) {
},
},
},
</script>
The same as init
You can customize the menubar and will receive some properties through a scoped slot.
properties: https://github.com/scrumpy/tiptap#editormenubar
<el-tiptap
v-model="content"
:extensions="extensions"
>
<!-- new syntax for slot since Vue 2.6.0
see: https://vuejs.org/v2/guide/components-slots.html -->
<template #menubar="{ commands, isActive }">
<!--You can render custom menu buttons.-->
<custom-button
:class="{ 'is-active': isActive.bold() }"
@click="commands.bold"
>
Bold
</custom-button>
</template>
</el-tiptap>
Customize the bubble menu like menubar.
properties: https://github.com/scrumpy/tiptap#editormenububble
<el-tiptap
v-model="content"
:extensions="extensions"
>
<template #menububble="{ commands, isActive }">
<custom-button
:class="{ 'is-active': isActive.bold() }"
@click="commands.bold"
>
Bold
</custom-button>
</template>
</el-tiptap>
Footer of the editor, after the editor content.
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 966 weekly downloads. As such, element-tiptap popularity was classified as not 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
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.