Ao trabalhar com o Quill como editor de texto rico em projetos Nuxtjs, encontrei alguns dseafios que gostaria de compartilhar

1.Instalação

npm install quill --save
npm install vue-quill-editor --save

2.Criação do plugin: crie um arquivo em plugins/vue-quill-editor.js com o seguinte conteúdo, configruando uma toolbar personalizada

import Vue from 'vue';
import VueQuillEditor from 'vue-quill-editor';
import Quill from 'vue-quill-editor/node_modules/quill';

const fontSizeStyle = Quill.import('attributors/style/size');
fontSizeStyle.whitelist = ['12px', '14px', '16px', '18px', '20px', '24px', '36px'];
Quill.register(fontSizeStyle, true);

Vue.use(VueQuillEditor);

3.Configuração no nuxt.config.js: adicione o plugin e os estilos do Quill, sendo editor.css o arquivo com personalizações

css: [
    'element-ui/lib/theme-chalk/index.css',
    '~assets/css/basic.css',
    '~assets/css/editor.css',
    'quill/dist/quill.snow.css',
    'quill/dist/quill.bubble.css',
    'quill/dist/quill.core.css'
  ],
  
  plugins: [
    '@/plugins/element-ui',
    '~/plugins/vue-echarts',
    '~/plugins/awe-dnd',
    { src: '@/plugins/vue-quill-editor', ssr: false },
    { src: '@/plugins/axios' },
    { src: '@/plugins/gmap' }
  ],

4.Estilos personalizados: em assets/css/editor.css

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before {
    content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before {
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before {
    content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before {
    content: '18px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before {
    content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before {
    content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36px"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before {
    content: '36px';
}

.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before{
    font-size: 12px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before{
    font-size: 14px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before{
    font-size: 16px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before{
    font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before{
    font-size: 20px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before{
    font-size: 24px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36px"]::before{
    font-size: 36px;
}

5.Utilização no componente

<client-only>
        <quill-editor
          ref="editor"
          v-model="artigo.texto"
          :options="configuracaoEditor"
          @change="aoAlterarEditor($event)"
        />
      </client-only>

Configuração das opções, utilizando TypeScript

private configuracaoEditor: any = {
      modules: {
        toolbar: {
          container: ['bold', 'italic', 'underline', { indent: '-1' }, { align: [] }, { indent: '+1' },
            { header: 1 }, { header: 2 },
            { size: ['12px', '14px', '16px', '18px', '20px', '24px', '36px'] },
            'link', 'image'],
          handlers: {
            image: () => {
              (this.$refs.uploadImg as any).click();
            }
          }
        }
      }
    }