doabit/element-tiptap

A WYSIWYG editor based on tiptap and element-ui for Vue2.0.

🎄 Demo

✨ Features

use element-ui components
markdown support
events you might use: init, transaction, focus, blur, paste, drop, update
add your own extensions
customize all extension menu button view
menu buttons can render in menubar and bubble menu
all it's up to you.

📦 Installation

NPM

yarn add element-tiptap

npm install --save element-tiptap

Then install element-tiptap plugin.

import Vue from 'vue';
import { ElementTiptapPlugin } from 'element-tiptap';

Vue.use(ElementTiptapPlugin);

Now you globally register 'element-tiptap' component.

CDN

<script src="https://unpkg.com/element-tiptap"></script>

<script src="https://cdn.jsdelivr.net/npm/element-tiptap"></script>

If Vue can be found in window the plugin should be installed automatically. And element-tiptap component will be globally registered.

🚀 Usage

<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(),
      new Italic(),
      new Strike(),
      new ListItem(),
      new BulletList(),
      new OrderedList(),
    ],
    // editor's content
    content: `
      <h1>Heading</h1>
      <p>This Editor is awesome!</p>
    `,
  },
},
</script>

📔 Props

extensions

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
ListItem
BulletList
OrderedList
TodoItem
TodoList
TextAlign
Indent
LineHeight
HorizontalRule
HardBreak
TrailingNode
History
Table
TableHeader
TableCell
TableRow
FormatClear
TextColor
TextHighlight

You can customize the extension menu button view,

create your custom extension.

// create your extension file
import { Bold } from 'element-tiptap';

export default class CustomBold extends Bold {
  menuBtnView (editorContext) {
    // editorContext contains a collection of properties that are useful to you
    // see https://github.com/scrumpy/tiptap#editormenubar
    // ElTiptap plus editor instance to editorContext.
    return {
      component: CustomButton, // your component
      componentProps: {
        ...
      },
    },
  }
}

use custom extension in component

<template>
  <el-tiptap :extensions="extensions />
</template>

<script>
import CustomBold from '...'; // import your extension

export default {
  ...
  data () {
    return {
      extensions: [
        ...
        new CustomBold(),
      ],
    };
  },
};
</script>

placeholder

When editor is empty, placeholder will display.

<el-tiptap
  placeholder="Write something …"
/>

content

Editor's content

<el-tiptap
  :content="content"
  @onUpdate="onEditorUpdate"
/>

or Use 'v-model'

<el-tiptap
  v-model="content"
/>

output

Output can be defined to 'html'(default) or 'json'.

<el-tiptap
  output="json"
/>

👽 Events

Init

<template>
  <el-tiptap
    @init="onInit"
  />
</template>

<script>
export default {
  ...
  methods: {
    // argument (object)
    // {
    //   editor: Editor, // tiptap editor instance
    // }
    methods: {
      onInit ({ editor }) {

      },
    },
  },
},
</script>

Transaction, Focus, Blur, Paste, Drop

The same as init

⚗️ Slots

menubar

You can customize the menubar.

<el-tiptap
  v-model="content"
  :extensions="extensions"
>
  <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>

menububble

Customize the bubble menu like menubar.

<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

Footer of the editor, after the editor content.

📝 Changelog

Changelog

💪 Roadmap

i18n
TypeScript
Font Size
Font Type

📄 License

MIT

doabit / element-tiptap