Componente Rich Text para Zeedhi

O componente de Rich Text é um editor de texto enriquecido com algumas funcionalidades.

Instalação

npm i @zeedhi/zd-richtext Com isso, dois pacotes serão instalados: o @zeedhi/zd-richtext-common e o @zeedhi/zd-richtext-vue.

Após a instalação, é necessário que você você importe o pacote @zeedhi/zd-richtext-vue dentro de seu arquivo de configuração zeedhi.ts

import { ZdRichText } from '@zeedhi/zd-richtext';

Vue.component('ZdRichText', ZdRichText);

Já o pacote @zeedhi/zd-rich-text-common deve ser importado no arquivo controller do componente.

Uso Básico

Para usar, defina a propriedade component como 'ZdRichText'.

{
  "name": "rich-text-example",
  "component": "ZdRichText"
}

Propriedades

outputFormat

Tipo: string

Default: json

Descrição: Define o formato de saída do conteúdo digitado ('json' ou 'html')

placeholder

Tipo: string

Default: ''

Descrição: Texto mostrado enquanto o editor estiver sem conteúdo

disabled

Tipo: boolean

Default: false

Descrição: Desabilita o componente

toolbarColor

Tipo: string

Default: '#772583'

Descrição: Define a cor da barra de tarefas

cardColor

Tipo: string

Default: ''

Descrição: Define a cor do cartão de entrada de texto

outlined

Tipo: boolean

Default: false

Descrição: Remove a elevação e adiciona uma borda fina ao cartão de entrada de texto

width

Tipo: number | string

Default: ''

Descrição: Define a largura do componente

height

Tipo: number | string

Default: ''

Descrição: Define a altura do componente

Eventos

Nome: onKeyDown

{ element, component, key, content }: IEventParam

Descrição: Disparado quando uma tecla é digitada no editor