Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

fbspbi

Como integrar o Tinymce com o Elfinder em suas Aplicações

Por , em Javascript

Recommended Posts

fbspbi    3

fbspbi
Postado

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

 

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

http://elfinder.org/

 

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

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:

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">
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:

 

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á.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rogerblower    0

rogerblower
Postado

Fabio baixei os arquivos, o editor funcionou normal, mas quando clico na pastinha aparece a janela do elfinder e uma tela com o erro:

Invalid backend response.Data is not JSON.

 

Já procurei e não achei a solução, pode me ajudar?

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito