donotebase/quasar-tiptap
Fork: 61 Star: 314 (更新于 2024-11-03 13:26:38)
license: MIT
Language: JavaScript .
A modern WYSIWYG rich-text editor built on top of tiptap and Quasar for Vue.js.
最后发布版本: @1.9.1 ( 2021-01-17 12:09:33)
quasar-tiptap
A modern WYSIWYG rich-text editor built on top of tiptap and Quasar Framework for Vue.js.
Examples & Demos
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.
# 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
yarn add quasar-tiptap
quasar.conf.js
Use mdi-v5
icon set and v-close-popup
directive.
extras: [
'mdi-v5'
],
framework: [
directives: [
'ClosePopup'
]
]
Usage
Register quasar-tiptap
globally by installing plugin, or import QuasarTiptap
component as needed.
Install plugin
import Vue from 'vue'
import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap'
Vue.use(QuasarTiptapPlugin, {
language: 'zh-hans',
spellcheck: true
})
Import component
<template>
<div>
<quasar-tiptap v-bind="options" @update="onUpdate" />
</div>
</template>
<script>
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')
}
}
</script>
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:
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
- 🍴Fork it
- 🔀Create your branch:
git checkout -b your-branch
- 🎨Make your changes
- 📝Commit your changes with Semantic Commit Messages (recommended)
- 🚀Push to the branch:
git push origin your-branch
- 🎉Submit a PR to
dev
branch
Roadmap
A todo list will be shown in QuasarTiptap Project kanban.
Thanks
- Authors of Quasar Framework
- Authors of tiptap
- Leecason for element-tiptap
License
The MIT License (MIT). Please see License File for more information.
最近版本更新:(数据更新于 2024-09-13 19:05:26)
2021-01-17 12:09:33 @1.9.1
2021-01-16 23:03:59 @1.9.0
2021-01-16 19:52:28 @1.8.0
2020-10-05 17:09:13 @1.7.0
2020-09-18 16:39:56 @1.6.1
2020-09-03 12:24:56 @1.6.0
2020-08-22 15:26:23 @1.5.1
2020-08-20 11:50:27 @1.5.0
2020-08-03 09:25:03 @1.4.7
2020-08-03 09:13:52 @1.4.6
主题(topics):
donote, quasar, quasar-editor, rich-text, tiptap, vue, wysiwyg-editor
donotebase/quasar-tiptap同语言 JavaScript最近更新仓库
2024-11-22 16:46:00 meshery/meshery
2024-11-21 23:03:24 bia-pain-bache/BPB-Worker-Panel
2024-11-21 22:46:48 MHSanaei/3x-ui
2024-11-21 07:00:59 nodejs/node
2024-11-21 00:49:46 FortAwesome/Font-Awesome
2024-11-18 14:26:02 projectdiscovery/nuclei-templates