Como integrar o Tinymce com o Elfinder em suas Aplicações
Como você já deve saber o TinyMCE transforma automaticamente qualquer textarea em um editor visual para páginas de Internet, conforme a figura abaixo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fswebdesigner.com.br/Libs/elfinder/files/tinymce1.jpg&key=19971a005a252617c6b430f5596c458d782d3dcb6d187929696eed55640d3c53" width="680" alt="tinymce1.jpg" />
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.c...ad/download.php
Tradução para português do Brasil
http://www.tinymce.com/i18n/index.php
Elfinder
Os arquivos baixados devem ficar dentro de alguma pasta na raiz de seu servidor, conforme abaixo:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fswebdesigner.com.br/Libs/elfinder/files/tinymce2.jpg&key=8c6b4ad49ce0c58afcf41ee3bb238a3e6e5d1bef98be9f9483a6bb32009111e3" width="576" alt="tinymce2.jpg" />
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fswebdesigner.com.br/Libs/elfinder/files/tinymce3.jpg&key=9a2aa9baa0b65b331e9fad4492bc452f48be8abb8c4baa879ea53075deab5118" width="576" alt="tinymce3.jpg" />
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">});
function elFinderBrowser (field_name, url, type, win) {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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.fswebdesigner.com.br/Libs/elfinder/files/tinymce4.jpg&key=dfafc527f916377c1a21eccad4ca4154975c9b8edaa4705a790bd0d05d60534c" width="579" alt="tinymce4.jpg" />
O exemplo desse tutorial pode ser visto no link: Demonstração
O código fonte dessa explicação pode ser baixado em:
http://www.fswebdesi...og_detalhe&id=1
Por favor, se te ajudou deixe seu comentário lá.
Discussão (5)
Carregando comentários...