106 lines
4.7 KiB
Markdown
106 lines
4.7 KiB
Markdown
|
---
|
|||
|
|
title: Atualização para a nova versão do FLUIG.richeditor
|
|||
|
|
source: https://tdn.totvs.com/pages/viewpage.action?pageId=934626311
|
|||
|
|
path: \Plataforma Documentação técnica\Recurso de Páginas e Widgets (WCM)\Atualização para a nova versão do FLUIG.richeditor.md
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
- [Atualização do componente](#AtualizaçãoparaanovaversãodoFLUIG.richeditor-Atualizaçãodocomponente)
|
|||
|
|
- [Breaking changes](#AtualizaçãoparaanovaversãodoFLUIG.richeditor-Breakingchanges)
|
|||
|
|
- [Alteração na configuração da toolbar do FLUIGC.richeditor](#AtualizaçãoparaanovaversãodoFLUIG.richeditor-AlteraçãonaconfiguraçãodatoolbardoFLUIGC.richeditor)
|
|||
|
|
- [Alterações de propriedades](#AtualizaçãoparaanovaversãodoFLUIG.richeditor-Alteraçõesdepropriedades)
|
|||
|
|
|
|||
|
|
## Atualização do componente
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
Recentemente, foi realizada uma atualização no componente FLUIG.richeditor com o objetivo de aumentar a estabilidade e a segurança da plataforma. A mudança causou alguns breaking changes. Isso significa que algumas inconsistências podem ocorrer para quem utiliza o componente via código, podendo haver a necessidade de realizar ajustes.
|
|||
|
|
|
|||
|
|
## Breaking changes
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
São alterações que podem impactar o código já existente e geralmente causando modificações na interface da API. Podem causar problemas em casos específicos.
|
|||
|
|
|
|||
|
|
| Ação | Alteração |
|
|||
|
|
| --- | --- |
|
|||
|
|
| viewHtml | Após essa alteração, não será mais possível adicionar scripts dentro do componente. O FLUIGC.richeditor sanitiza o HTML por motivos de segurança, especialmente ao visualizar ou editar conteúdo HTML através do modal "View HTML". Esse processo de sanitização remove certos elementos como as tags `<script>` e `<style>` do conteúdo, por segurança e para prevenir ataques de XSS (Cross-Site Scripting). |
|
|||
|
|
| converFtl e convertFtlAsync | Após essa alteração, não será mais possível carregar o componente dinamicamente, via `converFtl` e `convertFtlAsync`. |
|
|||
|
|
|
|||
|
|
## Alteração na configuração da toolbar do FLUIGC.richeditor
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
Compatibilidade modo escuro
|
|||
|
|
|
|||
|
|
Este recurso ainda não é compatível com o modo escuro lançado na atualização [Voyager 2.0](https://tdn.totvs.com/x/6HxjN). Para mais detalhes, consulte a documentação [Plataforma | Habilitar modo escuro](https://tdn.totvs.com/pages/viewpage.action?pageId=962611032#Plataforma%E2%9D%99Habilitarmodoescuro-Emquais%C3%A1reasn%C3%A3otemosomodoescuro?).
|
|||
|
|
|
|||
|
|
A forma de configurar a barra de ferramentas (toolbar) do `FLUIGC.richeditor` foi alterada. Não é mais possível configurar o `toolbar` e `toolbarGroups` **após** a inicialização do componente.
|
|||
|
|
|
|||
|
|
Agora, os botões e grupos devem ser definidos diretamente no momento da criação do editor, por meio da propriedade `tools`.
|
|||
|
|
|
|||
|
|
**Antes:**
|
|||
|
|
|
|||
|
|
**Exemplo de uso Rich Editor antes**
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
enableRichEditor: function() {
|
|||
|
|
this.editor = FLUIGC.richeditor('selector_' + this.instanceId, {
|
|||
|
|
height: 150
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
this.editor.editor.config.toolbar = [{
|
|||
|
|
name: 'editing',
|
|||
|
|
items: ['Bold','Italic', 'Underline', 'Strike', 'Subscript', 'Superscript']
|
|||
|
|
}, {
|
|||
|
|
name: 'removeFormat',
|
|||
|
|
items: ['RemoveFormat']
|
|||
|
|
}];
|
|||
|
|
|
|||
|
|
this.editor.editor.config.toolbarGroups = [{
|
|||
|
|
name: 'editing',
|
|||
|
|
groups: ['editing', 'removeFormat']
|
|||
|
|
}, {
|
|||
|
|
name: 'basicstyles',
|
|||
|
|
groups: ['basicstyles', 'cleanup']
|
|||
|
|
}];
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Agora:**
|
|||
|
|
|
|||
|
|
**Exemplo de uso Rich Editor agora**
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
enableRichEditor: function() {
|
|||
|
|
this.editor = FLUIGC.richeditor('selector_' + this.instanceId, {
|
|||
|
|
height: 150,
|
|||
|
|
tools: [
|
|||
|
|
['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript'], // group 1
|
|||
|
|
['cleanFormatting'] // group 2
|
|||
|
|
],
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
**Importante:**
|
|||
|
|
|
|||
|
|
- A configuração da toolbar **deve** ser feita no momento da inicialização do componente.
|
|||
|
|
- Não há suporte para alterar a toolbar dinamicamente após o editor ser criado.
|
|||
|
|
- Os nomes dos botões e grupos podem ter sofrido ajustes. Consulte a documentação atualizada do `FLUIGC.richeditor` para a lista completa de opções disponíveis em `tools`.
|
|||
|
|
|
|||
|
|
## Alterações de propriedades
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
As propriedades abaixo passaram por alterações ou foram removidas.
|
|||
|
|
|
|||
|
|
| Propriedade | Version | Description |
|
|||
|
|
| --- | --- | --- |
|
|||
|
|
| allowedContent | Removida | Propriedade removida. |
|
|||
|
|
| baseFloatZIndex | Removida | Use `zIndex` do css. |
|
|||
|
|
| disableNativeSpellChecker | Removida | Propriedade removida. |
|
|||
|
|
| extraPlugins | Removida | Propriedade removida. |
|
|||
|
|
| fullPage | Removida | Propriedade removida. |
|
|||
|
|
| pasteFromWordRemoveFontStyles | Trocada | Utilize a propriedade *pasteCleanupAll*. Todas as tags HTML são removidas e deixado apensar o texto. |
|
|||
|
|
| pasteFromWordRemoveStyles | Trocada | Utilize a propriedade *pasteCleanupCss* |
|
|||
|
|
| removePlugins | Removida | Propriedade removida. |
|