Un modern editor de text enriquit WYSIWYG construït sobre Tiptap i Quasar per Vue.js

Bloc

Un modern editor de text enriquit WYSIWYG construït sobre Tiptap i Quasar per Vue.js

Un modern editor de text enriquit WYSIWYG construït sobre Tiptap i Quasar per Vue.js

quasar-tiptap

Un modern editor de text enriquit WYSIWYG construït a sobre tiptap i Quasar Framework per a Vue.js.



Examples & Donem

Característiques

  • Extensions: tiptap extensions oficials i dotzenes d’extensions fantàstiques
  • Reducció
  • Diagrama i fórmula LaTex Math
  • Assistència I18n (en-us, zh-hans, pl, pt-br)
  • Totalment extensible per a extensions d'editor, barra de menú

I18n

  • en-us per defecte
  • zh-hans
  • pl per @qyloxe
  • pt-br per @ fal-pas

Instal·lació

Dependències

quasar-tiptap està construït sobre Quasar Framework i tiptap, per tant, s'hauria d'utilitzar a l'aplicació Quasar i depèn de diversos paquets.

# 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

Utilitzeu mdi-v5 conjunt d'icones i v-close-popup directiva.



node js publicació ajax
extras: [ 'mdi-v5' ], framework: [ directives: [ 'ClosePopup' ] ]

Ús

Registra't quasar-tiptap globalment instal·lant el connector o important QuasarTiptap component segons sigui necessari.

Instal·la el connector

import Vue from 'vue' import { QuasarTiptapPlugin, RecommendedExtensions } from 'quasar-tiptap' Vue.use(QuasarTiptapPlugin, { language: 'zh-hans', spellcheck: true })

Component d’importació

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

Propietats de l'editor

Propietat Tipus Per defecte Descripció
content `Objecte Cadena` null
editable Boolean true Quan s'estableix en false l'editor és de només lectura.
extensions Array [] Una llista d’extensions utilitzades per l’editor. Això pot ser String, Nodes, Marks o Plugins.
toolbar Array [] Una llista del botó de la barra d'eines utilitzat per l'editor. Això pot ser String, components Vue
tableToolbar Array [] Una llista del botó de la barra d'eines utilitzat per la taula. Això pot ser String, components Vue

Extensions

Extensions disponibles

Extensions proporcionades per tiptap oficial i 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 i barra d'eines a les opcions
extensió barra d'eines Observacions
'Atrevit' 'Negreta'
'Cursiva' 'Cursiva'
'Colpejar' 'colpejar'
'Subratllar' 'subratllar'
'Codi' 'Codi'
'CodeBlock' 'code_block'
'CodeBlockHighlight'
'BulletList' 'Bullet_list'
'Llista ordenada' 'Llista_ordenada'
'ListItem'
'TodoList' 'Todo_list'
'HorizontalRule' 'Horitzontal'
'Taula' 'Taula'
'Enllaç'
'Imatge' 'foto'
'OTitle'
'ODoc'
'OParagraph'
'OBlockquote' 'Blockquote'
'AllItem'
'OHeading' 'Encapçalament'
'OIndent' 'Sagnia', 'outdent'
'Alineació O' 'Align-dropdown', 'align-group'
'OLineHeight' 'Alçada de línia'
'OForeColor' 'Color del davant'
'OBackColor' 'Color de fons'
'OFontFamily' 'Font-family'
'OIframe' 'afegir més'
'ODiagram' 'afegir més'
'OKatexBlock' 'afegir més'
OKatexInline 'afegir més'
'OFormatClear' 'Format_clar'

Contribuint

  1. Forquilla
  2. Creeu la vostra oficina: git checkout -b your-branch
  3. Feu els vostres canvis
  4. Comprometeu els vostres canvis amb Missatges de comissió semàntica (recomanat)
  5. Feu clic a la branca: git push origin your-branch
  6. Envieu un PR a dev branca

Full de ruta

Es mostrarà una llista de tasques a Projecte QuasarTiptap kanban.

jsx no està permès en fitxers amb l'extensió '.js'

Gràcies

Detalls de la descàrrega:

Autor: base de dades

Mortal Kombat (descarregar pel·lícula 2021)

Demostració: https://donotebase.github.io/quasar-tiptap/

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

#vue #vuejs #javascript