element-tiptap

You can install element-tiptap using either yarn or npm.

yarn add element-tiptap

or

npm install --save element-tiptap

To use the el-tiptap component globally, install the plugin and its required styles in your main entry file.

Note: You must also have element-plus installed as it is a peer dependency.

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ElementTiptapPlugin from 'element-tiptap';
// import element-tiptap 样式
import 'element-tiptap/lib/style.css';

// 安装 ElementUI 插件
app.use(ElementPlus);
// 安装 element-tiptap 插件
app.use(ElementTiptapPlugin);
// 现在你已经在全局注册了 `el-tiptap` 组件。

app.mount('#app');

If you prefer not to register the component globally, you can import ElementTiptap directly within your component's <script setup> block.

<template>
  <el-tiptap ...><el-tiptap>
</template>

<script setup>
import { ElementTiptap } from 'element-tiptap';
</script>

You can install element-tiptap using yarn or npm.

Global Registration

To register the el-tiptap component globally in your Vue 3 application, install the package and use the ElementTiptapPlugin in your main entry file. You must also import the library's styles.

Partial Import

Alternatively, you can import the ElementTiptap component directly for local use in your components.

yarn add element-tiptap
# or
npm install --save element-tiptap

To use the el-tiptap component globally, register the plugin in your Vue app instance and ensure you import the required CSS.

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import ElementTiptapPlugin from 'element-tiptap';
import 'element-tiptap/lib/style.css';

const app = createApp(App);

app.use(ElementPlus);
app.use(ElementTiptapPlugin);

app.mount('#app');

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');

The Menubar component relies on a specific pattern within extension options to render toolbar buttons. For an extension to appear in the Menubar, its options object must include a button property which is a function.

This function is called by the Menubar component and receives an object containing:

• editor: The Tiptap Editor instance.
• t: The translation function (injected from the parent context).
• extension: The extension instance itself.

The button function must return either a single component specification object or an array of component specification objects. These objects are then used with v-bind to pass props and events to the rendered component.

You can define custom command buttons for the MenuBubble by configuring the bubble option in your Tiptap extensions.

An extension's bubble option should be a function that returns a component specification (or an array of specifications). This function receives an object containing the editor, translation function t, and the extension itself.

Example of the expected return structure for the button function:

// Inside an extension configuration
options: {
  bubble: ({ editor, t, extension }) => ({
    component: MyCustomButtonComponent,
    componentProps: {
      // props passed to MyCustomButtonComponent
    },
    componentEvents: {
      // events for MyCustomButtonComponent
    }
  })
}

To change the editor's language, import a locale object from element-tiptap/lib/locales/ and pass it to the locale prop.

Supported languages include: en (default), zh, pl, ru, de, ko, es, zh_tw, fr, pt_br, nl, he.

<template>
  <el-tiptap :locale="en"></el-tiptap>
</template>

<script setup>
import { ElementTiptap } from 'element-tiptap';
import en from 'element-tiptap/lib/locales/en';
</script>