Configuração deing da barra de ferramentas TinyMCE por meio de atributos de dicionário

Alterar a barra de ferramentas padrão do TinyMCE

Defina os itens da barra de ferramentas nas propriedades do sistema para habilitar ou desabilitar em Espaço.

Antes de Iniciar

Função necessária: administrador

Procedimento

Navegar até Todos > Propriedades do sistema > Propriedades da IU.

Atualize a propriedade Configura a barra de ferramentas de edição para campos HTML (TinyMCE v6.8.3) (glide.ui.html.editor.toolbar) para adicionar ou remover botões da barra de ferramentas.

Nota:

Use uma barra vertical ("|") para adicionar um separador de seção.


Tipo	Botões
Botões padrão	bold italic underline undo redo \| fontfamily fontsize table \| forecolor backcolor link unlink \| image media code \| alignleft aligncenter alignright \| bullist numlist fullscreen
Botões válidos	newdocument, bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, blocks, fontfamily, fontsize, tablecontrols, cut, copy, paste, pastetext, pasteword, search, replace, bullist, numlist, outdent, indent, blockquote, undo, redo, link, unlink, image, cleanup, code, forecolor, backcolor, removeformat, hr, visualaid, sub, sup, charmap, media, preview, fullscreen, accordion

Selecione Salvar.

Alterar a barra de ferramentas do TinyMCE para uma tabela específica

Defina os atributos no dicionário TinyMCE para determinar quais atributos TinyMCE são mostrados em uma tabela específica.

Antes de Iniciar

Função necessária: administrador

Procedimento

Navegue até um registro com um campo do tipo HTML que você deseja mudar.
Por exemplo, selecione um incidente, problema ou registro de conhecimento.
Clique com o botão direito do mouse no rótulo do campo (por exemplo, Corpo do artigo) e selecione Configurar dicionário.
Na seção Links relacionados, selecione Exibição avançada.
No campo Atributos, insira editor.toolbar= seguido pelos botões desejados da barra de ferramentas.
Por exemplo, editor.toolbar=blocks|negrito itálico sublinhado tachado blockquote subscript superscript removeformat| lista numérica de touros outdent indent|desfazer refazer|tabela hr|vincular desvincular|código de mídia de imagem|visualbloqueios visualizar tela cheia.
Nota:
- Inclua todos os itens da barra de ferramentas que você deseja exibir, não apenas os itens da barra de ferramentas que deseja adicionar.
- As configurações feitas no campo Atributo de um campo no registro de dicionário associado substituem o valor da propriedade do sistema glide.ui.html.editor.toolbar.
- Vários atributos, como altura, botões da barra de ferramentas e plug-ins da barra de ferramentas, podem ser combinados no campo Atributos. Por exemplo, editor.height=300,editor.plugins=table colorpicker textlink de cores código de mídiaespelho listas advlist tela cheiacharmap direcionalidade emoticons hr inserirdatahora sem quebrasquebra de páginapesquisa de impressãosubstituir contagem de palavras códigos de âncoraamostra visualbloqueios visuaiscaracteres compat3x link automático alinhar_listitems,editor.toolbar= fontfamily fontsize | negrito itálico sublinhado tachado forecolor backcolor colartext removeformatar | pesquisa de blocossubstituir desfazer refazer | lista de números de listagem externa recuo alinhamentoalinhamento esquerdoalinhamento centralalinhamento direito | link da tabela do sumário desvincular imagem codesample | código tela cheia.
Selecione Atualizar.

Mudar plug-ins do TinyMCE para uma tabela específica

Defina os atributos no dicionário TinyMCE para habilitar ou desabilitar plug-ins em um campo HTML específico.

Antes de Iniciar

Função necessária: administrador

Procedimento

Navegue até um registro com um campo do tipo HTML que você deseja mudar.
Por exemplo, selecione um incidente, problema ou registro de conhecimento.
Clique com o botão direito do mouse no rótulo do campo (por exemplo, Corpo do artigo) e selecione Configurar dicionário.
Na seção Links relacionados, selecione Exibição avançada.
No campo Atributos, insira editor.plugins= seguido pelos plug-ins desejados, separados por um espaço.
Por exemplo, editor.plugins=tabela texto do seletor de coreslink de cores código de mídiaespelho listas advlista tela cheiacharpem direcionalidade emoticons hr inserirdatahora sem quebra de páginaquebra de páginapesquisa de impressãosubstituir contagem de palavras âncora tabelade conteúdoscódigos de amostrablocos visuaiscaracteres compatíveis3x autolink alinhar_listaitens.
Nota:
- Inclua todos os itens da barra de ferramentas que você deseja exibir, não apenas os itens da barra de ferramentas que deseja adicionar.
- As configurações feitas no campo Atributo de um campo no registro de dicionário associado substituem o valor da propriedade do sistema glide.ui.html.editor.toolbar.
- Os plug-ins permitidos incluem: advlist alinhar_listitens âncora link automático redimensionar código bbcódigo de mapacódigos de espelhoamostra de cor seletor de direcionalidade emoticons tela cheia imagem de hr inserir datahora listas de links mídia sem quebras páginaquebra visualizar impressão somente leiturasem bordassubstituir texto da tabelatabela colorida de conteúdovisualbloqueia visualcaracteres contagem de palavras
- Vários atributos, como altura, botões da barra de ferramentas e plug-ins da barra de ferramentas, podem ser combinados no campo Atributos. Por exemplo, editor.height=300,editor.plugins=table colorpicker textlink de cores código de mídiaespelho listas advlist tela cheiacharmap direcionalidade emoticons hr inserirdatahora sem quebrasquebra de páginapesquisa de impressãosubstituir contagem de palavras códigos de âncoraamostra visualbloqueios visuaiscaracteres compat3x link automático alinhar_listitems,editor.toolbar= fontfamily fontsize | negrito itálico sublinhado tachado forecolor backcolor colartext removeformatar | pesquisa de blocossubstituir desfazer refazer | lista de números de listagem externa recuo alinhamentoalinhamento esquerdoalinhamento centralalinhamento direito | link da tabela do sumário desvincular imagem codesample | código tela cheia.
Selecione Atualizar.

Como alterar a altura padrão de um campo HTML

Altere a altura padrão de um campo HTML específico para expandir o tamanho de um campo de diário.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

A altura do campo HTML é configurada por campo HTML.

Procedimento

Navegue até um registro com um campo do tipo HTML que você deseja mudar.
Por exemplo, selecione um incidente, problema ou registro de conhecimento.
Clique com o botão direito do mouse no rótulo do campo (por exemplo, Corpo do artigo) e selecione Configurar dicionário.
Na seção Links relacionados, selecione Exibição avançada.
No campo Atributos, insira editor.height=X, em que X é a altura desejada.
Por exemplo, editor.height=250
Nota:
Os campos HTML podem variar de 72 a 2000. Os campos HTML são, por padrão, 64.
Selecione Atualizar.
Para configurar a altura dos campos de formulário dinamicamente conforme a linha de texto aumenta em vez de fornecer uma altura específica, conclua as seguintes etapas:
1. Navegar até Todos > Propriedades do sistema > Todas as Propriedades
2. Na barra de pesquisa, insira glide.ui.html.editor.enabled_plugins e selecione a propriedade.
3. No campo de valor, adicione redimensionamento automático.
4. Selecione Atualizar.
  O plug-in de dimensionamento automático está ativo.

Como alterar o tamanho da fonte padrão de um campo HTML

Altere o tamanho da fonte padrão de um campo HTML específico para usar um tamanho de fonte padrão em todos os formulários.

Antes de Iniciar

Função necessária: administrador

Por Que e Quando Desempenhar Esta Tarefa

O tamanho da fonte HTML é configurado por campo HTML.

Procedimento

Navegue até um registro com um campo do tipo HTML que você deseja mudar.
Por exemplo, selecione um incidente, problema ou registro de conhecimento.
Clique com o botão direito do mouse no rótulo do campo (por exemplo, Corpo do artigo) e selecione Configurar dicionário.
Selecione a guia Valor padrão.
No campo Valor padrão, insira , em que X é o valor padrão.
Por exemplo:
- Para definir a fonte como grande, insira 
- Para definir o tamanho como 10, insira 
Selecione Atualizar.

Configurar TinyMCE para permitir marcadores descontinuados

Você pode definir um atributo de dicionário em um campo TinyMCE para permitir o uso de marcadores HTML obsoletos, como e . Por padrão, o TinyMCE usa os marcadores e para formatação em negrito e itálico.

Antes de Iniciar

Função necessária: personalize_dictionary ou administrador

Por Que e Quando Desempenhar Esta Tarefa

Depois de definir o atributo do dicionário, use a exibição de código para inserir manualmente os marcadores descontinuados. O editor não valida nenhum marcador inserido manualmente, por exemplo, se você digitar um caractere incorreto.

Procedimento

Navegue até o formulário com um campo HTML que usa TinyMCE.
Clique com o botão direito do mouse no rótulo do campo HTML e selecione Configurar dicionário.
No campo Atributos, insira tinymce_allow_all=true, separado por uma vírgula, se necessário.

Os atributos de entrada de dicionário só podem ser adicionados a quando o formulário de entrada de dicionário está na exibição avançada, pois eles não são mostrados na exibição padrão.

Se outros atributos já estiverem listados, use uma vírgula como separador.
Selecione Atualizar.

Configurar TinyMCE para permitir JavaScript em URLs

Você pode definir um atributo de dicionário em um campo TinyMCE para permitir o uso de JavaScript em um URL.

Antes de Iniciar

Função necessária: personalize_dictionary ou administrador

Procedimento

Navegue até o formulário com um campo HTML que usa TinyMCE.
Clique com o botão direito do mouse no rótulo do campo HTML e selecione Configurar dicionário.
No campo Atributos, insira tinymce_allow_script_urls=true, separado por uma vírgula, se necessário.

Os atributos de entrada de dicionário só podem ser adicionados a quando o formulário de entrada de dicionário está na exibição avançada, pois eles não são mostrados na exibição padrão.

Se outros atributos já estiverem listados, use uma vírgula como separador.
Selecione Atualizar.

Configurar a barra de menus no editor de HTML TinyMCE

Você pode habilitar a barra de menus no editor de HTML TinyMCE na IU principal e nos espaços. Quando habilitada, a barra de menus aparece na parte superior do editor de HTML, que pode ser usada para criar, editar e formatar conteúdo. Por padrão, a barra de menus está inativa. Você pode habilitá-lo para uma tabela específica por meio da configuração de atributo de dicionário.

Antes de Iniciar

Função necessária: administrador

Procedimento

Navegue até um registro com um campo do tipo HTML que você deseja mudar.
Por exemplo, selecione um incidente, problema ou registro de conhecimento.
Clique com o botão direito do mouse no rótulo do campo e selecione Configurar dicionário.
Na seção Links relacionados, selecione Exibição avançada.
No campo Atributos, insira editor.config=new TinymceConfigScript().getConfiguration().

Este atributo editor.config aponta para um script: TinymceConfigScript().

Acesse o TinymceConfigScript.

Navegar até Todos > Definição do Sistema > Inclusões de script.
Insira TinymceConfigScript na barra de pesquisa próxima à parte superior do formulário e selecione Enter ou Retornar.

Selecione TinymceConfigScript.

Você poderá ver o script a seguir por padrão.

var TinymceConfigScript = Class.create();
TinymceConfigScript.prototype = {
    initialize: function() {
    },
    setTinymceConfig: function() {
    var tinyConfig = {
        menubar: 'edit format',
        menu: {
            file: { title: 'File', items: 'importword exportpdf exportword | print | deleteallconversations' },
            edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
            view: { title: 'View', items: 'code revisionhistory | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' }
        },
        style_formats: [
            { title: 'Headings', items: [
                { title: 'Heading 1', format: 'h1' },
                { title: 'Heading 2', format: 'h2' },
                { title: 'Heading 3', format: 'h3' },
                { title: 'Heading 4', format: 'h4' },
                { title: 'Heading 5', format: 'h5' },
                { title: 'Heading 6', format: 'h6' }
            ]},
            { title: 'Inline', items: [
                { title: 'Bold', format: 'bold' },
                { title: 'Italic', format: 'italic' },
                { title: 'Underline', format: 'underline' },
                { title: 'Strikethrough', format: 'strikethrough' },
                { title: 'Superscript', format: 'superscript' },
                { title: 'Subscript', format: 'subscript' },
                { title: 'Code', format: 'code' }
            ]},
            { title: 'Blocks', items: [
                { title: 'Paragraph', format: 'p' },
                { title: 'Blockquote', format: 'blockquote' },
                { title: 'Div', format: 'div' },
                { title: 'Pre', format: 'pre' }
            ]},
            { title: 'Align', items: [
                { title: 'Left', format: 'alignleft' },
                { title: 'Center', format: 'aligncenter' },
                { title: 'Right', format: 'alignright' },
                { title: 'Justify', format: 'alignjustify' }
            ]}
        ]
    };
    return tinyConfig;
},
getConfiguration: function() {
    var config = this.setTinymceConfig();
    answer = JSON.parse(JSON.stringify(config));
},

    type: 'TinymceConfigScript'
};

Defina o atributo da barra de menus como verdadeiro no script para habilitar a barra de menus.
Isso habilitará todas as opções “Arquivo” “Editar” “Exibir” “Inserir” “Formatar” “Tabela” na barra de menus.
Se você quiser desabilitar a barra de menus, defina o atributo da barra de menus como falso.
Se você quiser habilitar apenas opções específicas na barra de menus, poderá mudar o script listando essas opções específicas na barra de menus.

Por exemplo, barra de menus: 'formato de edição de arquivo' para que somente essas 3 opções apareçam na barra de menus.

Você também pode configurar os botões exibidos em um menu alterando o script.

tinymce.init({
    selector: 'textarea', // change this value according to your HTML
    menu:{
        file: { title: 'File', items: 'newdocument restordraft | preview | importword exportpdf exportword | print | deleteallconversations' },
        edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
        view: { title: 'View', items: 'code revision history | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments' },
        insert: { title: 'Insert', items: 'image link media addcomment pageembed codesample inserttable | math | charmap emoticons hr | pagebreak nonbreaking anchor tableofcontents | insertdatetime' },
        format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript codeformat | styles blocks fontfamily fontsize align lineheight | forecolor backcolor | language | removeformat' },
        tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
        table: { title: 'Table', items: 'inserttable | cell row column | advtablesort | tableprops deletetable' },
        help: { title: 'Help', items: 'help' }
    }
});

Configure opções de formato de estilo personalizado no TinyMCEConfigScript anexando o CSS na seçãostyle_formats.

Exemplo da seção "style_formats" do TinyMCEConfigScript:

style_formats: [
  { title: 'Headings', items: [
    { title: 'Heading 1', format: 'h1' },
    { title: 'Heading 2', format: 'h2' },
    { title: 'Heading 3', format: 'h3' },
    { title: 'Heading 4', format: 'h4' },
    { title: 'Heading 5', format: 'h5' },
    { title: 'Heading 6', format: 'h6' }
  ]},
  { title: 'Inline', items: [
    { title: 'Bold', format: 'bold' },
    { title: 'Italic', format: 'italic' },
    { title: 'Underline', format: 'underline' },
    { title: 'Strikethrough', format: 'strikethrough' },
    { title: 'Superscript', format: 'superscript' },
    { title: 'Subscript', format: 'subscript' },
    { title: 'Code', format: 'code' }
  ]},
  { title: 'Blocks', items: [
    { title: 'Paragraph', format: 'p' },
    { title: 'Blockquote', format: 'blockquote' },
    { title: 'Div', format: 'div' },
    { title: 'Pre', format: 'pre' }
  ]},
  { title: 'Align', items: [
    { title: 'Left', format: 'alignleft' },
    { title: 'Center', format: 'aligncenter' },
    { title: 'Right', format: 'alignright' },
    { title: 'Justify', format: 'alignjustify' }
  ]}
]

Exemplo com três novos formatos de estilo adicionados (texto em negrito, texto em vermelho, My-inline):

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  style_formats: [
    { title: 'Bold text', inline: 'b' },
    { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
    { name: 'my-inline', title: 'My inline', inline: 'span', classes: [ 'my-inline' ] }
  ],
  // The following option is used to append style formats rather than overwrite the default style formats.
  style_formats_merge: true
});

Acesse o editor de HTML e você verá que os novos formatos de estilo personalizado (texto em negrito, texto em vermelho, meu em linha) aparecem na seção de formatos da barra de menus.