Como integrar o Tinymce com o Elfinder para o desenvolvimento de suas

fabio.schneider · Fevereiro 3, 2015

Como você já deve saber o TinyMCE transforma automaticamente qualquer textarea em um editor visual para páginas de Internet, conforme a figura abaixo:

O Tinymce possui recurso de inserção de imagens, porém, para que possamos selecionar um arquivo qualquer em nosso computador e inserir no editor TinyMCE é preciso integrá-lo com o gerenciador de arquivos Elfinder (existem outros mas nesse post utilizaremos o Elfinder).

Então vamos separar a explicação por etapas:

1º passo: Realizar o download do TinyMCE em sua versão mais atual e também do Elfinder. Seguem os links:

TinyMCE

http://www.tinymce.com/download/download.php

Tradução para português do Brasil

http://www.tinymce.com/i18n/index.php

Elfinder

http://elfinder.org/

Os arquivos baixados devem ficar dentro de alguma pasta na raiz de seu servidor, conforme abaixo:

2º passo: Extrair os arquivos e deletar os zipados:

Após a extração iremos copiar o arquivo de tradução que está dentro da pasta "langs" e colar o mesmo no seguinte caminho: tinymce/js/tinymce/langs

Feito isso, os arquivos ficarão organizados da seguinte forma:

3º passo: Criar um arquivo setando o tinymce configurado com o elfinder.

<html>
<head>
<script type="text/javascript" src="tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript" src="tinymce/js/tinymce/langs/pt_BR.js"></script>
<script type="text/javascript">
tinymce.init({
    file_browser_callback : elFinderBrowser,
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons",
    image_advtab: true,
    templates: [
        {title: 'Test template 1', content: 'Test 1'},
        {title: 'Test template 2', content: 'Test 2'}
    ]
});

function elFinderBrowser (field_name, url, type, win) {
  tinymce.activeEditor.windowManager.open({
    file: 'elfinder-2.0-rc1/elfinder.html',// use an absolute path!
    title: 'Upload de Arquivos',
    width: 900,  
    height: 450,
    resizable: 'yes'
  }, {
    setUrl: function (url) {
      win.document.getElementById(field_name).value = url;
    }
  });
  return false;
}
</script>
</head>
<body>
<form class="form-horizontal" method="post" action="acaodoseuform" >
<h1>Exemplo TinyMCE configurado com Elfinder</h1>
<textarea name="descricao" rows="15"></textarea>
</form>
</body>
</html>

E é somente isso. Agora você já pode fazer o upload de imagens para o seu TinyMCE:

O exemplo desse tutorial pode ser visto no link: Demonstração

O código fonte dessa explicação pode ser baixado em:

http://www.fswebdesigner.com.br/index.php?pagina=blog_detalhe&id=1

Por favor, se te ajudou deixe seu comentário lá.

Entrar

Como integrar o Tinymce com o Elfinder para o desenvolvimento de suas

Pergunta

fabio.schneider

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades