Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/donotebase/quasar-tiptap

A modern WYSIWYG rich-text editor built on top of tiptap and Quasar for Vue.js.
https://github.com/donotebase/quasar-tiptap

donote quasar quasar-editor rich-text tiptap vue wysiwyg-editor

Last synced: 3 months ago
JSON representation

A modern WYSIWYG rich-text editor built on top of tiptap and Quasar for Vue.js.

Host: GitHub
URL: https://github.com/donotebase/quasar-tiptap
Owner: donotebase
License: mit
Created: 2020-04-15T09:47:13.000Z (almost 5 years ago)
Default Branch: dev
Last Pushed: 2022-12-29T16:31:22.000Z (about 2 years ago)
Last Synced: 2024-10-01T11:08:14.288Z (4 months ago)
Topics: donote, quasar, quasar-editor, rich-text, tiptap, vue, wysiwyg-editor
Language: JavaScript
Homepage: https://donotebase.github.io/quasar-tiptap
Size: 5.74 MB
Stars: 314
Watchers: 12
Forks: 61
Open Issues: 48
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

quasar-awesome - github - tiptap) | A modern WYSIWYG rich-text editor built on top of tiptap and Quasar Framework for Vue.js. | v1.9.14 | (Awesome Quasar [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) / Tutorials)

README

        # quasar-tiptap

A modern WYSIWYG rich-text editor built on top of [tiptap](https://github.com/scrumpy/tiptap) and [Quasar Framework](https://github.com/quasarframework) for Vue.js.

[![](https://img.shields.io/npm/v/quasar-tiptap.svg?label=version)](https://www.npmjs.com/package/quasar-tiptap)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/fe954819c420439485737e74aff30485)](https://www.codacy.com/gh/donotebase/quasar-tiptap?utm_source=github.com&utm_medium=referral&utm_content=donotebase/quasar-tiptap&utm_campaign=Badge_Grade)

[![Build Status](https://travis-ci.org/donotebase/quasar-tiptap.svg?branch=dev)](https://travis-ci.org/donotebase/quasar-tiptap)

[![](https://img.shields.io/npm/dependency-version/quasar-tiptap/peer/vue?color=vue)](https://www.npmjs.com/package/quasar-tiptap)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Join the chat at discord](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/QAzbWuq)

[![](https://img.shields.io/npm/l/quasar-tiptap.svg)](https://www.npmjs.com/package/quasar-tiptap)

## Examples & Demos

- [Examples](https://github.com/donotebase/quasar-tiptap/tree/dev/src/pages/examples)

- [Live Demo](https://donotebase.github.io/quasar-tiptap)

- [Code Sandbox](https://codesandbox.io/s/quasar-tiptap-fytkc?file=/src/pages/Index.vue)

## Features

- Extensions: tiptap official extensions, and dozens of great extensions

- Markdown

- Diagram and LaTex Math formula

- I18n support (`en-us`, `zh-hans`, `pl`, `pt-br`)

- Fully extensible for editor extensions, menubar

### I18n

- `en-us` default

- `zh-hans`

- `pl` by @qyloxe

- `pt-br` by @fal-pasa

## Installation

### Dependencies

quasar-tiptap is built on top of Quasar Framework and tiptap, therefore it should be used in Quasar App and depends on several packages.

```bash

# required

yarn add tiptap

yarn add tiptap-extensions

# optional (required if diagram and latex formula enabled)

yarn add vue-codemirror

yarn add mermaid

yarn add katex

```

### quasar-tiptap

```bash

yarn add quasar-tiptap

```

### quasar.conf.js

Use `mdi-v5` icon set and `v-close-popup` directive.

```bash

extras: [

  'mdi-v5'

],

framework: [

  directives: [

    'ClosePopup'

  ]

]

```

## Usage

Register `quasar-tiptap` globally by installing plugin, or import `QuasarTiptap` component as needed.

### Install plugin

```vue

import Vue from 'vue'

import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap'

Vue.use(QuasarTiptapPlugin, {

  language: 'zh-hans',

  spellcheck: true

})

```

### Import component

```vue

  


    

  


import { QuasarTiptap, RecommendedExtensions } from 'quasar-tiptap'

import 'quasar-tiptap/lib/index.css'

export default {

  data () {

    return {

      options: {

        content: 'content',

        editable: true,

        extensions: [

          ...RecommendedExtensions,

          // other extenstions

          // name string, or custom extension

        ],

        toolbar: [

          'add-more',

          'separator',

          'bold',

          'italic',

          'underline',

          // other toolbar buttons

          // name string

        ]

      },

      json: '',

      html: ''

    }

  },

  components: {

    QuasarTiptap,

  },

  methods: {

    onUpdate ({ getJSON, getHTML }) {

      this.json = getJSON()

      this.html = getHTML()

      console.log('html', this.html)

    }

  },

  mounted () {

    // set language dynamically

    this.$o.lang.set('en-us')

  }

}

```

### Editor Properties

| **Property** | **Type** | **Default** | **Description** |

| --- | :---: | :---: | --- |

| `content` | `Object\|String` | `null` | The editor content |

| `editable` | `Boolean` | `true` | When set to `false` the editor is read-only. |

| `extensions` | `Array` | `[]` | A list of extensions used, by the editor. This can be `String`, `Nodes`, `Marks` or `Plugins`. |

| `toolbar` | `Array` | `[]` | A list of toolbar button used, by the editor. This can be `String`, Vue components |

| `tableToolbar` | `Array` | `[]` | A list of toolbar button used, by the table. This can be `String`, Vue components |

## Extensions

### Available Extensions

Extensions provided by tiptap official and quasar-tip:

```js

export const TipTapExtensions = [

  'Bold',

  'Italic',

  'Strike',

  'Underline',

  'Code',

  'CodeBlock',

  'CodeBlockHighlight',

  'BulletList',

  'OrderedList',

  'ListItem',

  'TodoList',

  'HorizontalRule',

  'Table',

  'Link',

  'Image',

]

export const QuasarTipTapExtensions = [

  'OTitle',

  'ODoc',

  'OParagraph',

  'OBlockquote',

  'OTodoItem',

  'OHeading',

  'OAlignment',

  'OLineHeight',

  'OForeColor',

  'OBackColor',

  'OFontFamily',

  'OIframe',

  'ODiagram',

  'OKatexBlock',

  'OKatexInline',

  'OFormatClear',

]

export const RecommendedExtensions = [

  ...TipTapExtensions,

  ...QuasarTipTapExtensions

]

```

#### extensions and toolbar in options

|extension   |toolbar  |Remarks  |

|:------|:------------|:--------|

|'Bold' |'bold' | |

|'Italic' |'italic' | |

|'Strike' |'strike' | |

|'Underline' |'underline' | |

|'Code' |'code' | |

|'CodeBlock' |'code_blok' | |

|'CodeBlockHighlight' | | |

|'BulletList' |'bullet_list' | |

|'OrderedList' |'ordered_list' | |

|'ListItem' | | |

|'TodoList' |'todo_list' | |

|'HorizontalRule' |'horizontal' | |

|'Table' |'table' | |

|'Link' | | |

|'Image' |'photo' | |

|'OTitle' | | |

|'ODoc' | | |

|'OParagraph' | | |

|'OBlockquote' |'blockquote' | |

|'OTodoItem' | | |

|'OHeading' |'heading' | |

|'OIndent' |'indent', 'outdent' | |

|'OAlignment' |'align-dropdown', 'align-group' | |

|'OLineHeight' |'line-height' | |

|'OForeColor' |'fore-color' | |

|'OBackColor' |'back-color' | |

|'OFontFamily' |'font-family' | |

|'OIframe' | |'add-more' |

|'ODiagram' | |'add-more' |

|'OKatexBlock' | |'add-more' |

|'OKatexInline' | |'add-more' |

|'OFormatClear' |'format_clear' | |

## 🏗 Contributing ![PR or ISSUE](https://img.shields.io/badge/PR%20or%20ISSUE-welcome-brightgreen)

1. 🍴Fork it

2. 🔀Create your branch: `git checkout -b your-branch`

3. 🎨Make your changes

4. 📝Commit your changes with [Semantic Commit Messages (recommended)](https://gist.github.com/joshbuchea/6f47e86d2510bce28f8e7f42ae84c716)

5. 🚀Push to the branch: `git push origin your-branch`

6. 🎉Submit a PR to `dev` branch

## Roadmap

A todo list will be shown in [QuasarTiptap Project](https://github.com/donotebase/quasar-tiptap/projects/1) kanban.

## Thanks

- Authors of [Quasar Framework](https://github.com/quasarframework)

- Authors of [tiptap](https://github.com/scrumpy/tiptap)

- Leecason for [element-tiptap](https://github.com/Leecason/element-tiptap)

## License

The MIT License (MIT). Please see [License File](https://github.com/donotebase/quasar-tiptap/blob/master/LICENSE) for more information.