188 lines
5.9 KiB
Markdown
Executable File
188 lines
5.9 KiB
Markdown
Executable File
# Plano de Implementação: Substituição do SCEditor pelo Quill
|
|
|
|
## Objetivo
|
|
Substituir o editor SCEditor atual pelo editor Quill para modernizar a experiência de edição de texto no sistema SysCMS.
|
|
|
|
## Análise Comparativa
|
|
|
|
### SCEditor
|
|
- **Pros**:
|
|
- Leve e estável
|
|
- Funcionalidade básica de edição de BBCode
|
|
- Largamente utilizado em projetos mais antigos
|
|
- Suporte para emoticons
|
|
- Interface mais simples
|
|
|
|
- **Contras**:
|
|
- Interface desatualizada
|
|
- Baseado em jQuery (legado)
|
|
- Limitado para BBCode
|
|
- Não suporta edição WYSIWYG moderna
|
|
- Sem recursos avançados como tabelas, listas, etc.
|
|
- Manutenção mínima pela comunidade
|
|
|
|
### Quill
|
|
- **Pros**:
|
|
- Editor moderno e amplamente utilizado
|
|
- Interface WYSIWYG completa
|
|
- Suporte para formatação rica (negrito, itálico, etc.)
|
|
- Suporte para tabelas, listas e blocos
|
|
- API limpa e extensível
|
|
- Comunidade ativa
|
|
- Documentação completa
|
|
- Suporte para dispositivos móveis
|
|
- Performance superior
|
|
|
|
- **Contras**:
|
|
- Curva de aprendizado mais íngreme
|
|
- Requer mais dependências (JavaScript moderno)
|
|
- Pode ser excessivo para casos simples de uso
|
|
- Configuração inicial mais complexa
|
|
|
|
## Fase 1: Preparação e Instalação
|
|
|
|
### 1.1. Download dos Recursos
|
|
- Baixar a versão mais recente do Quill (v2.x.x)
|
|
- Baixar os temas CSS do Quill (quill.snow.css, quill.bubble.css)
|
|
- Baixar os ícones do Quill
|
|
|
|
### 1.2. Estrutura de Arquivos
|
|
```
|
|
public/assets/
|
|
├── quill/
|
|
│ ├── quill.min.js
|
|
│ ├── quill.js
|
|
│ └── quill.css
|
|
└── js/
|
|
└── quill-init.js
|
|
```
|
|
|
|
### 1.3. Configuração do Quill
|
|
- Criar arquivo de configuração para personalizar o Quill
|
|
- Definir toolbar com ferramentas essiais
|
|
- Configurar tema visual compatível com o sistema
|
|
- Habilitar/desabilitar recursos conforme necessidade
|
|
|
|
### 1.4. Substituição nos Templates
|
|
|
|
#### Templates a Modificar:
|
|
1. **templates/layouts/base.twig**
|
|
- Remover referências ao SCEditor
|
|
- Adicionar referências ao Quill
|
|
- Manter estrutura Bootstrap existente
|
|
|
|
2. **templates/layouts/dashboard.twig**
|
|
- Atualizar referências de editor
|
|
- Adicionar script de inicialização do Quill
|
|
|
|
3. **templates/partials/language-switcher.twig**
|
|
- Manter inalterado (não afetado pelo editor)
|
|
|
|
4. **Templates de formulários**
|
|
- Identificar templates que contenham campos de texto
|
|
- Substituir SCEditor por Quill onde necessário
|
|
|
|
## Fase 2: Implementação
|
|
|
|
### 2.1. Classe Helper para Quill
|
|
- Criar `app/Helpers/QuillHelper.php`
|
|
- Centralizar configuração e inicialização do Quill
|
|
- Fornecer métodos para:
|
|
- Obter instância do editor
|
|
- Definir conteúdo
|
|
- Obter conteúdo em formato HTML ou texto
|
|
- Limpar o editor
|
|
|
|
### 2.2. Integração com o Sistema Existente
|
|
- Modificar `kernel/Application.php` para carregar o QuillHelper
|
|
- Adicionar função global no Twig para o QuillHelper
|
|
- Manter compatibilidade com funções de tradução existentes
|
|
|
|
### 2.3. Scripts de Inicialização
|
|
- Criar `public/assets/js/quill-init.js`
|
|
- Configurar instâncias do Quill em todas as páginas
|
|
- Suportar múltiplos editores na mesma página
|
|
- Inicializar editores apenas quando necessário
|
|
|
|
### 2.4. Temas e Estilos
|
|
- Criar tema Quill personalizado em `public/assets/css/quill-syscms.css`
|
|
- Adaptar cores e estilos para combinar com o tema do sistema
|
|
- Garantir responsividade
|
|
|
|
## Fase 3: Testes
|
|
|
|
### 3.1. Testes Unitários
|
|
- Criar testes para as funcionalidades básicas
|
|
- Verificar integração com o sistema de tradução
|
|
- Testar compatibilidade com diferentes navegadores
|
|
|
|
### 3.2. Testes de Integração
|
|
- Testar funcionamento em páginas reais
|
|
- Verificar performance e uso de memória
|
|
- Testar persistência de dados
|
|
|
|
## Fase 4: Implantação
|
|
|
|
### 4.1. Migração Gradual
|
|
- Implementar modo de compatibilidade para usar Quill ou SCEditor
|
|
- Manter SCEditor funcional para edição de BBCode
|
|
- Permitir migração incremental por módulo
|
|
|
|
### 4.2. Documentação e Treinamento
|
|
- Atualizar documentação do sistema
|
|
- Criar guia de migração para desenvolvedores
|
|
- Fornecer exemplos de código
|
|
|
|
## Fase 5: Rollback e Manutenção
|
|
|
|
### 5.1. Plano de Rollback
|
|
- Manter backup do SCEditor
|
|
- Criar sistema para reverter para SCEditor se necessário
|
|
- Documentar procedimento de emergência
|
|
|
|
## Considerações
|
|
|
|
### Segurança
|
|
- Sanitizar todo conteúdo HTML gerado pelo Quill
|
|
- Implementar CSP (Content Security Policy) adequado
|
|
- Validar conteúdo do lado do servidor
|
|
|
|
### Performance
|
|
- Carregar Quill apenas quando necessário (lazy loading)
|
|
- Otimizar tamanho do bundle
|
|
- Implementar cache para configurações
|
|
|
|
### Acessibilidade
|
|
- Garantir suporte a leitores de tela
|
|
- Fornecer atalhos de teclado
|
|
- Manter compatibilidade com navegadores mais antigos
|
|
|
|
## Cronograma Estimado
|
|
|
|
- **Fase 1**: 2-3 dias (Download, configuração básica)
|
|
- **Fase 2**: 3-5 dias (Implementação principal, testes)
|
|
- **Fase 3**: 2-3 dias (Integração completa, testes finais)
|
|
- **Fase 4**: 1-2 dias (Implantação, documentação, treinamento)
|
|
- **Fase 5**: 1 semana (Estabilização, correções finais)
|
|
|
|
## Próximos Passos
|
|
|
|
1. Aprovar a implementação do plano
|
|
2. Baixar e organizar os recursos do Quill
|
|
3. Criar a estrutura de arquivos proposta
|
|
4. Implementar o QuillHelper básico
|
|
5. Modificar os templates principais
|
|
6. Criar script de inicialização
|
|
7. Realizar testes preliminares
|
|
8. Documentar as mudanças
|
|
|
|
## Conclusão
|
|
|
|
A substituição do SCEditor pelo Quill trará benefícios significativos para o sistema:
|
|
- Interface moderna e intuitiva
|
|
- Maior produtividade para usuários
|
|
- Melhor experiência em dispositivos móveis
|
|
- Manutenibilidade simplificada a longo prazo
|
|
- Alinhamento com tecnologias web atuais
|
|
|
|
Este plano fornece uma base sólida para a implementação, garantindo uma transição suave e bem-sucedida. |