Pesquisar na Comunidade
Mostrando resultados para as tags ''aplicações web''.
Encontrado 1 registro
-
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á.