Como usar o editor de texto Quill Editor no VueJS

Introdução

O Quill Editor é um plugin com a capacidade de deixar um textarea como um editor de textos poderoso, adicionando as funções de tornar o texto como negrito, sublinhado, colocar marcações de código, alinhamentos, listas, imagens e muito mais.

E com isso, você da a possibilidade do usuário digitar e personalizar um texto para salvar na aplicação.

O texto formatado é um HTML, que você pode salvar no banco de dados, e quando recuperar caso o usuário queira editar, você pode colocar novamente o HTML no quill editor.

Prós

• Conseguir personalizar um texto no textarea
• Adicionar outros formatos de conteúdo, como imagens por exemplo
• API mais completa para o DOM do que outros plugins como CKEditor

Contras

• Pode não dar suporte a navegadores muito antigos

Instalação no projeto

Pode ser instalado utilizando npm ou yarn com os seguintes comandos:

npm install vue-quill-editor --save
ou
yarn add vue-quill-editor

Depois disso, abra o arquivo main.js, e importe o Quill Editor dessa forma:

import VueQuillEditor from 'vue-quill-editor'

Esse plugin requer importação de css, há 3 estilos disponíveis no site do plugin, porém para este exemplo usaremos o css abaixo:

import 'quill/dist/quill.snow.css';

E por fim, registre o plugin também no main.js

Vue.use(VueQuillEditor);

Como usar

Para utilizar o plugin, agora você pode colocar a tag <quill-editor> dentro do componente no qual você vai utilizar o quill editor.

Nessa tag você pode definir uma referência, o v-model para controlar o conteúdo.

Também é possível passar a prop :options com personalizações sobre o editor (placeholder, readonly) e também pode se utilizar eventos como o blur, focus e ready por exemplo.

Eu criei um projeto novo em Vue para mostrar como utilizar o vue-quill-editor.

No projeto, fiz a instalação do plugin com os passos acima, e criei um componente chamado VueQuillEditorComponent.

Nele irei utilizar colocar a tag <quill-editor> porém isso poderia ser feito em qualquer componente já existente em seu projeto.

Importei esse componente para o App para quando eu acessar o localhost o quill editor já estará na tela.

Também criei um botão “Salvar” para que quando eu clicar, salvar esse conteúdo no localStorage, somente para exemplificar, esse conteúdo poderia ser salvo em qualquer banco de dados.

Meu componente ficou dessa forma:

<template>
  <div class="quillEditorContainer">
    <div class="quillEditor">
      <quill-editor 
        v-model="contentHtml"
        ref="refQuillEditor"
        :options="quillOptions"
      >
    </quill-editor>
    <button type="submit" class="buttonSave" @click="saveText">Salvar</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VueQuillEditorComponent',
  data(){
    return {
      contentHtml: '',
      quillOptions: {
          placeholder: 'Digite uma frase para personalizar',
          readonly: false,
      }
    }
  },

  methods: {
    saveText(){
      localStorage.setItem('content', this.contentHtml)
    }
  },
}

</script>
<style scoped>
.buttonSave{
  background-color: blue;
  width: 60px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid blue;
  color: white;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quillEditor {
  width: 60%;
  display: flex;
  flex-direction: column;
}

.quillEditorContainer{
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>

E na tela ficou assim:

Agora se eu digitar qualquer texto dentro do quill editor, formatar o texto com as opções da barra de formatação de texto e clicar em salvar, ele irá salvar o HTML do texto formatado no meu localStorage, então para a seguinte formatação, se terá esta saída:

Casos de uso

Esse plugin pode ser utilizado para criar editores para blog, editores de e-mail ou qualquer outro texto que você deseja formatar.

Página de demonstração desse plugin

Acesse a página de demonstração oficial do plugins em https://github.surmon.me/vue-quill-editor/

Alternativas

Caso queira ver outros plugins parecidos para comparar pode verificar o seguintes plugins

• CKEditor (https://www.npmjs.com/package/vue-ckeditor5)
• Vue2Editor (https://www.npmjs.com/package/vue2-editor)

Vídeo

Para assistir um vídeo explicativo sobre o assunto, veja:

Código fonte

O código fonte está no meu CodeSandbox, neste link.

Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.

Conclusão

Este artigo foi para abordar como se utilizar um editor de textos com o VueJS.

O quill editor editor é muito útil e ele pode ser adaptado para qualquer tipo de projeto.

Muito obrigado e até a próxima.