Atualizações do editor de HTML TinyMCE 5

  • Versão de lançamento: Washingtondc
  • Atualizado 1 de fev. de 2024
  • 3 min. de leitura
  • As mudanças do TinyMCE 4 para o TinyMCE 5 podem exigir que você faça atualizações para manter a funcionalidade do editor de HTML TinyMCE. Se você usou um provedor angular de widget para modificar o editor em widgets Portal de serviços em versões anteriores, revise essas mudanças e faça as atualizações aplicáveis.

    Mudanças que podem interromper implementações personalizadas do TinyMCE

    Algumas mudanças podem interromper implementações personalizadas do TinyMCE em Portal de serviços.

    Observe as seguintes mudanças em temas e capas:

    • O tema moderno não é compatível. Em vez disso, use o tema prateado.
    • A capa cinza claro não é compatível. A capa padrão é Óxido.

      As capas sn-editor-themed ou sn-editor também podem ser usadas. A capa com tema de sn-editor usa variáveis de tema do Now Design System (NDS), e sn-editor usa valores codificados.

      Nota:
      Para manter o estilo da capa cinza claro, use o seguinte código na sua folha de estilos:
      .tox .tox-toolbar-overlord {
            background-color: #f0f0f0 !important; 
         } 

    Observe as seguintes mudanças nos namespaces do método da API em Portal de serviços:

    San Diego Tokyo
    ed.adicionarBotão ed.ui.registry.addButton
    ao clicar onAction

    Consulte a documentação do Tiny MCE5 Migrando do TinyMCE 4 para o TinyMCE 5 para obter informações adicionais.

    Mudanças adicionais

    As mudanças a seguir podem afetar implementações personalizadas do TinyMCE em Portal de serviços:

    • O menu de contexto do navegador para recursos como copiar e colar está disponível selecionando Ctrl + clique para Windows ou Command + clique para Mac no seu teclado. Clicar com o botão direito do mouse abre a opção Link em vez do menu de contexto do navegador.
    • Espaços reservados HTML não são compatíveis. Somente espaços reservados baseados em cadeia de caracteres são compatíveis.
    • O plug-in somente leitura personalizado não está disponível por padrão. Você deve adicionar readonlynoborder a glide.ui.html.editor.v5.enabled_plugins.
    • A nova propriedade do sistema glide.ui.html.editor.default_link_target permite que você defina um valor de destino padrão para links. Os valores de cadeia de caracteres incluem: '_blank', '', '_self' e '_top'. O valor de destino padrão é ''.

    • A opção de redimensionamento redimensiona a barra de ferramentas além do editor. Adicione a opção min_height para impedir que o redimensionamento se aplique à barra de ferramentas.
    • redimensionar não é compatível com dispositivos móveis.
    • A opção tool_mode é definida como flutuante por padrão para área de trabalho em vez de encapsulamento. Altere esta configuração para restaurar a aparência padrão do TinyMCE 4.
    • A opção tool_mode é definida como rolagem por padrão para dispositivos móveis em vez de quebra. Altere esta configuração para dispositivos móveis para manter a aparência de TinyMCE 4.
    • A opção de altura representa a altura inteira do editor e foi atualizada para adicionar 39 pixels para a barra de ferramentas e 18 pixels para a barra de status.
      Nota:
      Se a altura não estiver definida corretamente, uma barra de rolagem desnecessária poderá aparecer.
    • O plug-in sn_mentions usa a capa sn-editor. A capa com tema de sn-editor também é compatível.
    • A opção de menu de contexto inclui apenas uma opção de link por padrão. Adicione contextmenu:false para manter a aparência do TinyMCE 4.
    • Os valores da opção fontsize_formats são separados por um espaço, como em fontsize_formats: '7pt 7.5pt 8pt 10pt 12pt 14pt 18pt 24pt 36pt'. Barras verticais (|) não são mais necessárias.
    • O plug-in PowerPaste está na lista de opções de plug- ins, em vez da lista de opções de plug- ins externos.
      San Diego Tokyo
      external_plugins: { 
             powerpaste: '/scripts/tinymce4_4_3/plugins/powerpaste/plugin.min.js?sysparm_substitute=false' 
         }, 
      plugins: "lists code link powerpaste"
    • Há suporte para os seguintes idiomas adicionais: francês canadense (fq), húngaro (hu), tailandês (th) e turco (tr). Você pode atualizar a lista de idiomas da seguinte forma para incluir estes idiomas:
      var langs = 'cs,de,en,es,fi,fr,fq,he,hu,it,ja,ko,nl,pl,pt,ru,th,tr,zh,zt';
    • Estilos CSS aplicados usando o namespace mce- não são compatíveis. Em vez disso, use as novas classes CSS.
    • Adicione o plug-in Listas à lista de opções de plug- ins para poder usar listas numeradas ou com marcadores.