Vuejs 3 Styled editor

Styled rich text editor component using Tiptap Supports a limited set of HTML tags as specified in allowedTags prop Has a toolbar with buttons for the allowed tags

Fontawesome

These icons are used in the toolbar

• fa-bold
• fa-italic
• fa-underline
• fa-strikethrough
• fa-link
• fa-link-slash
• fa-list-ul
• fa-list-ol
• fa-undo
• fa-redo

import them like this

import {
  faBold,
  faItalic,
  faUnderline,
  faStrikethrough,
  faListOl,
  faListUl,
  faUndo,
  faRedo,
  faLink,
  faLinkSlash,
} from '@fortawesome/pro-light-svg-icons'

and also icons used for placeholder groups if any

i18n

locale/sv.js and locale/en.js contains translations for mostly aria-labels. Import them and add them to strings in project like this:

import sv from '@/locales/sv.js'
import en from '@/locales/en.js'

import styledEditorSv from '@lu.se/styled-editor/locales/sv.js'
import styledEditorEn from '@lu.se/styled-editor/locales/en.js'

// Merge styled editor translations
sv.styled_editor = styledEditorSv.styled_editor
en.styled_editor = styledEditorEn.styled_editor

Props

• modelValue: String, required, the HTML content of the editor
• state: Boolean or null, default null, validation state of the editor
• disabled: Boolean, default false, whether the editor is disabled
• allowedTags: Array of strings, default [], list of allowed HTML tags a, b, i, u, s, ul, ol, li, br, p (li are implicit if not specified) if p is omitted will ul, ol and li not be allowed

Emits

• update:model-value: emitted when the content changes

It has custom logic to convert the editor content to HTML, handling placeholders and avoiding empty paragraphs in lists.

Slots

• toolbar-append: add something to the end of the toolbar. It exposes two fields
  • disabled: Boolean if components inside slot should be disabled
  • insertPlaceHolder: Function which take one argument. The placeholder to be inserted as <var>placeholder</var>

Exposed functions

• focus(): give focus to editor
• insertPlaceholder(name: string): Function which take one argument. The placeholder to be inserted as <var>placeholder</var>