The tiptap-vuetify from flambe

WYSIWYG editor for Vuetify. Component simplifies integration tiptap with vuetify.

Features

used vuetify components
support for different types of icons (fa, md, mdi)
internationalization (2 languages: en, ru)
easy to start using
props and events are available
the project is ready to actively develop if there is support (stars)!
TypeScript support

Installation

yarn add tiptap-vuetify
# Or 
npm install --save tiptap-vuetify

Get started

Add Vue.use for plugin. You can select your icons group (iconsGroup, 'md' by default).

import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
// don't forget to import styles
import 'tiptap-vuetify/dist/main.css'

// first it
Vue.use(Vuetify)
// AFTER Vue.use(Vuetify) !!!
Vue.use(TiptapVuetifyPlugin, {
  // optional, default to 'md' (default vuetify icons before v2.0.0)
  iconsGroup: 'md'
})

More about vuetify icons you can read here.

Use in your component. Here is a complete example:

<template>
  <div>
    <!--Use the component in the right place of the template-->
    <tiptap-vuetify
      v-model="content"
      :extensions="extensions"
    />

    <!--Here's how to make a preview (optional)-->
    <h1>Preview</h1>
    <hr>

    <div
      class="tiptap-vuetify-editor__content"
      v-html="content"
    />
  </div>
</template>

<script>
// import the component and the necessary extensions
import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, CodeBlock, Paragraph, BulletList, OrderedList,
  ListItem, Link, Blockquote, HardBreak, HorizontalRule, History
} from 'tiptap-vuetify'

export default {
  // specify in the list of components
  components: { TiptapVuetify },
  data: () => ({
    // declare extensions you want to use
    extensions: [
      // you can specify options for extension
      new Heading({
        levels: [1, 2, 3]
      }),
      new Bold(),
      new Italic(),
      new Strike(),
      new Underline(),
      new Code(),
      new CodeBlock(),
      new Paragraph(),
      new BulletList(),
      new OrderedList(),
      new ListItem(),
      new Link(),
      new Blockquote(),
      new HardBreak(),
      new HorizontalRule(),
      new History()
    ],
    // starting content for the editor
    content: `
      <h1>Yay Headlines!</h1>
      <p>All these <strong>cool tags</strong> are working now.</p>
    `
  })
}
</script>

There is another use case with the script tag (CDN version of package):

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

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

Props

placeholder

Placeholder is displayed when there is no content in the editor.

How to use:

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

extensions

You can use the necessary extensions. The corresponding buttons are added automatically (in the order in which you specify the extension).

How to import and use them can be seen in the example above.

Available extensions:

Bold
Italic
Strike
Underline
Code
CodeBlock
Paragraph
BulletList
OrderedList
ListItem
Link
Blockquote
HardBreak
HorizontalRule
History

toolbar-attributes

You can specify your attributes for the toolbar (<v-toolbar> vuetify component).

For example, change the color:

:toolbar-attributes="{ color: 'yellow' }"

editor-properties

Tiptap Editor properties (passed to the constructor).

You can see the full list of properties here.

Only these properties are not available: content, onUpdate, they are used in this package. If you want to add extensions to the extensions property, then use the native-extensions prop of this package.

native-extensions

How to use:

<tiptap-vuetify
  :native-extensions="nativeExtensions"
/>

// in script:
data () {
  return {
    nativeExtensions: [new TiptapExtension1(), new TiptapExtension2()]
  }
}

output-format

The format to output from the v-model. This defaults to html

For example, to get json instead:

<tiptap-vuetify
  output-format="json"
/>

Events

@init

first argument (object):

{
  // tiptap editor instance
  editor: Editor
}

How to use:

<tiptap-vuetify
  @init="onInit"
/>

Slots

toolbar

How to use:

Since Vue 2.6.0 (new syntax):

<tiptap-vuetify
  v-model="content"
  :extensions="extensions"
  :toolbar-attributes="{ color: 'yellow' }"
>
  <template #toolbar="{ buttons, commands, isActive }">
    <!--You can render the buttons as you wish (you can see in the source code how this is done).-->
    <pre>{{ buttons }}</pre>
  </template>
</tiptap-vuetify>

Before 2.6.0:

<tiptap-vuetify>
  <div 
    slot="toolbar" 
    slot-scope="{ buttons, commands, isActive }"
  >
    <!--You can render the buttons as you wish (you can see in the source code how this is done).-->
    <pre>{{ buttons }}</pre>
  </div>
</tiptap-vuetify>

footer

Footer of the Editor.

toolbar-before

You can add content before the toolbar.

toolbar-after

You can add content after the toolbar.

TODO

images uploading (free hosting by default)
emoticons
tests
custom content for bubble menu
choose where the extension buttons should be displayed: in the toolbar or in the bubble menu

flambe / tiptap-vuetify Goto Github PK

tiptap-vuetify's Introduction

Features

Installation

Get started

Props

placeholder

extensions

toolbar-attributes

editor-properties

native-extensions

output-format

Events

@init

Slots

toolbar

footer

toolbar-before

toolbar-after

TODO

tiptap-vuetify's People

Contributors

Watchers

Recommend Projects

Recommend Topics

Recommend Org