Configuração ing A barra de ferramentas TinyMCE por meio de Atributos de dicionário

Altere a barra de ferramentas padrão TinyMCE

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

Antes de Iniciar

Função necessária: administrador

Procedimento

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

Atualize o. Configura a barra de ferramentas de edição para campos HTML (TinyMCE v6.8.2) (glide.ui.html.editor.toolbar) propriedade 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 disponíveis	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 Save (Salvar).

Altere a barra de ferramentas TinyMCE para uma tabela específica

Defina os atributos no dicionário TinyMCE para determinar quais atributos TinyMCE são exibidos 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 alterar.
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 .
Em Atributos campo, entrada barra de ferramentas do editor seguido pelos botões da barra de ferramentas desejados.
Por exemplo, bloco de ferramentas|negrito sublinhado itálico riscado bloco quote subscrito sobrescrito removeformaformato| bullist enumerar recuo fora|desfazer refazer|tabela hr|desvincular link|código de mídia de imagem|visualização de blocos de visualização em 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 você deseja adicionar.
- As configurações feitas no campo Atributo de um campo no registro 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, 300,editor.plugins=table selecionador de cores textcolor link imagem mídia codemirror listas advlist mapa de caracteres de tela cheia direcionalidade emoticons hr insertdatetime pagebreak impressão searchsubstituir contagem de palavras âncoramostra visualizalblocks visualizalchars compat3x autolink align_listitems,editor.toolfamily fontfamily fontonalig | bold itálico sublinhado taliglecooutcolor .
Selecione Atualizar.

Mude os plug-ins 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 alterar.
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 .
Em Atributos campo, entrada editor.plugins= seguido pelos plug-ins desejados, separados por um espaço.
Por exemplo, editor.plugins=table selecionador de cores texto link de cor imagem mídia codemirror listas advlist mapa de caracteres de tela cheia direcionalidade emoticons hr insertdatetime inquebrável pagebreak impressão searchsubstituir contagem de palavras âncora tabelaconteúdos codesamostra visualizalblocos visualizalchars compat3x autolink align_listitems .
Nota:
- Inclua todos os itens da barra de ferramentas que você deseja exibir, não apenas os itens da barra de ferramentas que você deseja adicionar.
- As configurações feitas no campo Atributo de um campo no registro Dicionário associado substituem o valor da propriedade do sistema glide.ui.html.editor.toolbar.
- Os plug-ins permitidos incluem: Advlist align_listitems anchor autolink autoresize bbcode charmap codemirror codemirror codesamostra selecionador de cores direcionalidade emoticons imagem hr tela cheia insertdatetime link listas mídia nonbreakbreak exibição de impressão readonlynoborder searchsubstituir tabela textcolor tableofcontents visualblocks visualizalchars wordcount
- 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, 300,editor.plugins=table selecionador de cores textcolor link imagem mídia codemirror listas advlist mapa de caracteres de tela cheia direcionalidade emoticons hr insertdatetime pagebreak impressão searchsubstituir contagem de palavras âncoramostra visualizalblocks visualizalchars compat3x autolink align_listitems,editor.toolfamily fontfamily fontonalig | bold itálico sublinhado taliglecooutcolor .
Selecione Atualizar.

Altere 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 alterar.
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 .
Em Atributos campo, insira editor.altura X , Em que X é a altura desejada.
Por exemplo, altura: 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é Tudo > Propriedades do sistema > Todas as Propriedades
2. Na barra de pesquisa, insira glide.ui.html.editor.enabled_plug-ins e selecione a propriedade.
3. No campo Valor, adicione redimensionamento automático .
4. Selecione Atualizar.
  O plug-in de redimensionamento automático está ativo.

Altere o tamanho da fonte padrão de um campo HTML

Altere o tamanho de 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 alterar.
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.
Em Valor padrão campo, 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.

Configure o TinyMCE para permitir marcadores obsoletos

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 o. e. marcadores 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 de dicionário, use a exibição de código para inserir manualmente marcadores obsoletos. 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 .
Em Atributos campo, insira "tinymce_allow_all , separados por uma vírgula, se necessário.

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

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

Configure o 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 uma 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 .
Em Atributos campo, insira se você não tiver um código de segurança, clique em "tinymce" , separados por uma vírgula, se necessário.

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

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

Configure a barra de menus no editor de HTML TinyMCE

Você pode habilitar a barra de menus no editor de HTML TinyMCE em CoreUI e espaços de trabalho. 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 alterar.
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 TinkymceConfigScript().getConfiguration() .

Isso editor.config pontos de atributo a um script: TynmceConfigScript() .

Acesse TynmceConfigScript .

Navegar até Tudo > Definição do Sistema > Inclusões de script.
Insira TynmceConfigScript na barra de pesquisa, próxima à parte superior do formulário, e selecione insira ou retornar .

Selecione TynmceConfigScript .

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" "Formato" "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 somente 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ção style_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 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 verá que os novos formatos de estilo personalizados (texto em negrito, texto vermelho, My-inline) aparecem na seção de formatos da barra de menus.