flavioescobar1@gmail.com
Como criar formatações personalizadas no editor TinyMCE do Joomla!

Como criar formatações personalizadas no editor TinyMCE do Joomla!

Muitas vezes, ao desenvolver um site para um cliente, nós criamos formatações para alguns elementos que estão dentro de textos que o cliente poderá editar futuramente pelo painel do Joomla!. Por exemplo: criamos uma classe no CSS chamada "botao" que transforma o texto em um botão.

No entanto, não é desejável que o cliente, ao tentar criar um elemento em forma de botão, tenha que editar o conteúdo da página no formato HTML. Muito provavelmente o cliente não entenda HTML e, caso entendesse, por que ele precisaria dos seus serviços?

Neste artigo eu ensino como criar opções de formatações personalizadas dentro do TinyMCE (editor padrão de conteúdo de artigos do Joomla!).

Exemplo: um botão azul

Suponha que você criou a seguinte classe "botao":

.botao {
    background: none repeat scroll 0 0 #0291dd;
    border-radius: 5px;
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    padding: 7px 40px;
    text-shadow: none;
    color: #FFF;
}

O resultado dessa formatação seria: Botão

Para facilitar a vida do seu cliente, você poderia criar uma formatação personalizada do TinyMCE, obtendo o seguinte resultado:

Mas como fazer isso?

É mais simples do que você imagina. Basta editar o arquivo <raiz do seu site Joomla!>/plugins/editors/tinymce/tinymce.php, buscando pelas ocorrências da função tinymce.init.

Dentro de cada chamada desta função, há um objeto passado como parâmetro. Adicione as linhas a seguir no final deste objeto:

style_formats_merge: true,
style_formats: [
    {
        title: 'Personalizado',
        items: [
            {title: 'Botão azul', inline: 'span', classes: 'botao'}
        ]
    }
],

Pronto! Sempre que o cliente selecionar um trecho do texto e aplicar a formatação "Botão azul", a classe "botao" será adicionada a esse trecho e, como você definiu os atributos deste elemento no seu CSS, o botão aparecerá sem que o cliente precise editar qualquer HTML!

Lembrando que você pode adicionar vários itens de formatação dentro do array items, apenas criando objetos separados por vírgula. Veja como ficaria a criação de mais opções:

style_formats_merge: true,
style_formats: [
    {
        title: 'Personalizado',
        items: [
            {title: 'Botão azul', inline: 'span', classes: 'botao'},
            {title: 'Botão verde', inline: 'span', classes: 'botao_verde'},
            {title: 'Título cinza', inline: 'h1', classes: 'titulo_cinza'}
        ]
    }
],

Gostou da dica? Ficou com alguma dúvida? Fique à vontade para comentar esse post!

Posts similares

  • Executar ações ...

    Dicas

  • Como resolver pro...

    Dicas

  • Carregar módulos...

    Dicas

Deixe um comentário



O meu blog fala de assuntos relacionados à Tecnologia da Informação. Aqui você encontra tutoriais, notícias e diversos outros conteúdos.




Executar ações após salvar um item de um componente Joomla!

Ao utilizar componentes para Joomla! (desenvolvidos ou não...


Como resolver problema do Gerenciador de Mídias do Joomla! só fazer uploads na pasta raiz

Você acessa o Gerenciador de Mídias do Joomla! e tenta...


Carregar módulos do Joomla! sem a tag jdoc

Você já precisou carregar um módulo do Joomla! fora do...


Como criar formatações personalizadas no editor TinyMCE do Joomla!

Muitas vezes, ao desenvolver um site para um cliente, nós...


Criando um módulo simples para Joomla! 3.x

Segundo a documentação do Joomla!, "um módulo é uma...