ZooxEditorToolbar

O componente de toolbar é usado para formatar o texto do editor e é usado internamente pelo componente ZooxTextEditor.

Sua forma mais comum de uso se dá pela necessidade de um toolbar desaclopado.

Veja o exemplo abaixo:

Aviso

Observe que o valor da prop toolbar no componente ZooxTextEditor deve ser igual a prop id do componente ZooxEditorToolbar.

//Importa o componente
import {ZooxEditorToolbar} from '@zoox-ui/text-editor'

//Registra o componente
Vue.component('z-editor-toolbar', ZooxEditorToolbar)

<template>
  <div>
    <z-text-editor v-model="editorValue" toolbar="#meu-toolbar-desaclopado">
    </z-text-editor>

    <z-card class="mt-5" title="Eu tenho um toolbar dentro de um card">
      <template #content>
        <z-editor-toolbar id="meu-toolbar-desaclopado"></z-editor-toolbar>
      </template>
    </z-card>
  </div>
</template>

Renderiza:

Eu tenho um toolbar dentro de um card

Props

Prop name	Type	Description	Values	Default
id*	String	ID do toolbar	-	-
type	String	Define o tipo do toolbar	full | minimal | essential	essential
toolbarStyle	Object	Objeto para customização do toolbar	-	{ background:'#fff', borderRadius: '10px 10px 0 0' }
pickerColors	Array	Array que define cores dos picker do toolbar	-	[]