Howto – Integrando TinyMCE com FCKEditor em JSP

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/

24 thoughts to “Howto – Integrando TinyMCE com FCKEditor em JSP”

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

  2. 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…

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

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

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

  6. 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…

  7. jveloso, verifica no teu web.xml essa parte:

    Connector
    /tinyfck/filemanager/connectors/jsp/connector


    SimpleUploader
    /tinyfck/filemanager/upload/simpleuploader

    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

  8. 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 ?

  9. 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….

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

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

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

  13. 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!

  14. @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

Leave a Reply

Your email address will not be published. Required fields are marked *