FCKEditor e TinyMCE são editores HTML (WYSIWYG) muito poderosos. Que permitem serem integrados em sistemas adminstrativos de maneira muito satisfatória.
Entretando, o FCKEditor é muito grande, e o TinyMCE não possui um administrador de uploader livre (Ibrowser só funciona com PHP). Precisei implementar um sistema de notícias com características de upload de imagens na própria edição, foi então que encotrei o TinyFCK, como seu nome mesmo diz, é uma integração do TyneMCE com o admnistrador de upload do FCKEditor.
Realizei a integração com JSP com sucesso. Vamos as etapas:
Passo 1 – Download
1. Faça o download do tinyfck em:
http://prdownloads.sourceforge.net/p4a/tinyfck-0.13.zip?download
2. Faça do download do FCKEditor JSP Integration Pack em: http://prdownloads.sourceforge.net/fckeditor/FCKeditor-2.3.zip?download
Passo 2 – Instalação
1. Descompacte o tinyfck em um diretório chamado “tinyfck” dentro de sua aplicação web (Por exemplo: “WebApp/tinyfck”).
2. Descompacte o FCKEditor Java Integration Library em um diretório chamado “FCKeditor”, e copie os dois arquivos “commons-fileupload.jar” e “FCKeditor-2.3.jar” que estão dentro da pasta /FCKeditor/web/WEB-INF/lib para dentro do WEB-INF/lib da sua aplicação (Por exemplo: “WebApp/WEB-INF/”).
A estrutura de diretórios finais deve ficar como abaixo:
/WebApp/
/tinyfck
/WEB-INF
/lib
Passo 3 – Integração
1. Deve-se editar o arquivo web.xml e adicionar as linhas mostradas no link. (Fica em: WebApp/WEB-INF/web.xml):
Passo 4 – Como usar
1. Em uma página JSP, adicione as linhas deste arquivo entre as tags head:
2. Adicione dentro da tag BODY um campo textarea
E pronto, já pode-se compilar… e utilizar o sistema…
- Update: (04/10/2007)
Se você implementar este código, irá perceber que o mesmo não possui a opção delete no gerenciador de arquivos, isso pode ser contornando com uma simples modificação. Veja detalhes de como implementar isso aqui: http://www.bram.us/2006/10/02/my-tinymce-file-management/
Muito bom. 🙂
Thunder Boy,
Eu estou usando o Ibrowser com PHP conforme a dica do Pascal – http://pascal.vanhecke.info/2005/08/25/image-upload-plugin-for-tinymce/ – onde vi seu comentário.
Poderia me dar uma ajuda? Está tudo funcionando numa boa, com exceção do botão do Ibrowser que não fica ativo quando selecionado ou “mouseover”. Também percebi que dá um erro de javascript: ” O obejto não dá suporte para a propriedade ou método”. Alguma dica?
[]s,
Luiz
Luiz, realmente o Ibrowser é muito legal, bonitinho e tal… usei ele algumas vezes, porém sempre aparece q a pagina foi carregado com erro no Internet Explorer.. apesar de funcionar sem problemas…
Então passeia usar o tinyFCK para tudo, tanto JSP como para PHP, onde só muda o tipo de connector, onde para PHP, vc pode ver um exemplo aqui: http://p4a.crealabsfoundation.org/tinyfck
Espero ter ajudado…
Como eu faço para dimuir os itens do menu, não consigo encontrar
Ola tudo bem?
Nao sei se pode me ajudar,mas achei o FCKEditor for WordPress e instalei,achei show o plugin,porem nao sei o que ele tem ou como configurar,(sou novato no ramo) pois ele nao mostra as fotos, em um post,as ferramentas esta la,mas ele nao manda pro post as fotos que eu quero que aparesa no post,voce sabe como fazer? obrigado.
boas,
nao consigo visualizar o ficheiro xml.
Alguem me pode passar isso…preciso mesmo disso.
Obrigado
Como não consegue Gonçalo? É so clicar no link: http://jf.eti.br/wp-content/uploads/2007/03/web_xml.txt
olá, tudo bem ?
Amigo, implementei na minha página java, mas não funciona o upload de imagens, tem alguma configuração de diretório? Ele não acha o conector jsp, eu posso estar fazendo alguma coisa errada. Me dá ajuda nesse ponto.
Agradeço tua atenção.
Amigo, o tinyFCK não vem o Connector JSP.
Onde voce arrumou ele?!
Bem, realmente sozinho ele não vem com o conector, por isso que deve efetuar o download do FCKEditor JSP Integration Pack, conforme o passo 2 de itens a baixar, logo acima.
Muito obrigado.
Quanto tento abrir o browser de arquivos recebo a seguinte mensagem: xml request erro: internal server error (500). Do que se trata ? O diretório userfiles está criado e com permissões…
jveloso, verifica no teu web.xml essa parte:
Connector
/tinyfck/filemanager/connectors/jsp/connector
Já passei por este erro, ai percebi que como estava usando uma sub-pasta para a área administrativa de minha aplicação, tive que colocar assim, ficando assim:
admin/tinyfck/filemanager/connectors/jsp/connector
admin/tinyfck/filemanager/upload/simpleuploader
A pasta tinyfck está na raiz do diretório da aplicação mesmo app/tinyfck, contudo não existe pasta jsp e upload dentro da pasta tinyfck… será por isso ?
Bom. depois de um longo e tenebroso inverno com esse problema, consegui encontrar a solução neste post:
http://www.fckeditor.net/forums/viewtopic.php?f=6&t=2406&start=0&st=0&sk=t&sd=a&hilit=endorsed
É só copiar os .jar nesse diretório e pimba !!!
Olá tudo bom?
Li seu comentário a respeito do tinymce, e você comentou que era fácil trocar o idioma do mesmo. Amigo se você puder me ajudar pois já tentei de tudo e não consegui trocar o idioma. Abraços….
Renato,
Você deve fazer o download do arquivo de idiomas portugues diretamente na página de language packs: http://tinymce.moxiecode.com/download_i18n.php
e aqui você vê como configurar o TinyMCE para poder utilizar o arquivo baixado:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/language
boa noite, cara estou com o erro listado acima
xml request erro: internal server error (500)
entao coloquei os jars listados abaixo dentro da pasta do tomcat “apache-tomcat-5.5.27\common\endorsed”
gostaria de saber se alguem pode me ajudar com isso
desde ja agradeço a ajuda de todos.
jars:
xalan.jar ,xml-apis.jar,xercesImpl.jar,serializer.jar
Fábio, muito estranho esses erros ai… acabei de refazer o tutorial aqui só pra testar se tinha algum passo errado, e deu tudo certo… sugiro q refaça o passo-a-passo. Se estiver achando complicado, sugiro que veja direto no site da onde me me inspirei:
http://www.jroller.com/coreteam/entry/integrate_tinyfck_with_jsp
Thunder-boy
Estou precisando de uma especificação sobre este editor o TinyFCK, pois vou usa-lo em uma aplicação aqui em meu serviço, mais eles estão querendo saber se é opensource e tudo mais…
tem como vc me ajudar, onde posso encontrar tal especificação?
sou grato pela atenção
Olá Marlon, que tipo de especificação? É sim totalmente livre, o TinyFCK é uma função de dois produtos livres, que é o FCK Editor e o TinyMCE.
Na verdade aproveitou o que o TinyMCE tem de melhor que é o editor altamente customizável e acrescentou-se a opção de upload de arquivos do FCKEditor, em JAVA. Com isso surgiu este terceiro produto o TinyFCK.
Olá Jonas, estou com um problema no connector JSP, que realmente não está lá na pasta filemanager. O que eu preciso fazer para pegar este arquivo? Desculpe, mas esta parte não ficou clara. E pelo que percebi, só falta isto para funcionar… Se puder me ajudar, serei grato!
@Enrico, and anyone at all looking over the web for this,
I don’t know if TinyFCK 0.13 ever had the “connectors/jsp/connector” directory, but in the only version I could find online (0.16), this JSP-specific connector directory didn’t exist. What you need to do is go into the JSP Integration Pack and you’ll find these two directories within the ZIP:
A)-> src\com\fredck\FCKeditor\connector
B)-> src\com\fredck\FCKeditor\uploader
Within TinyFCK’s “filemanager\connectors” directory, create the folders “jsp\connector” and paste the contents of directory A above into your new folder, so it contains ConnectorServlet.java and package.html.
Now within TinyFCK’s “filemanager” directory, create new directory “upload” and paste the contents of directory B above into your new folder, so it contains SimpleUploaderServlet.java and package.html.
Now, assuming you’ve made the alterations to your web.xml as described in the article, further change this so that:
/tinyfck/filemanager/connectors/jsp/connector
is now /tinyfck/filemanager/connectors/jsp/ConnectorServlet
And change:
/tinyfck/filemanager/upload/simpleuploader
to /tinyfck/filemanager/upload/SimpleUploaderServlet
If you followed this and all the above in the article, you’ll find that the TinyFCK editor now displays correctly in your page. However, upon pressing the Image button, you’ll get 404 errors. To fix this, change the line “var connector = “../../filemanager/browser.html?Connector=connectors/jsp/connector”;” in your JSP to now read “var connector = “../../filemanager/browser.html?Connector=connectors/jsp/ConnectorServlet”;”
Re-compile your app and whatever and you’ll find that the editor and all upload functionality works perfectly. By default, all folders you create on the server and images you upload to them will be created in tomcat\webapps\[webapproot]\UserFiles\.
I’ve tested this all myself and it works fine. =D