Konfigurasi FCKEditor untuk ZK 3.6.2

Siapa yang gak tau FCKEditor? FCKEditor merupakan WYUSIWYG Editor untuk aplikasi web yang paling populer. FCKEditor juga mudah diintegrasikan dengan bahasa pemrograman web apa saja, mulai asp, jsp, php, .net dan lainnya. Secara khusus untuk ZK framework FCKEditor sudah terintegrasi dengan cukup apik 🙂

Walaupun demikian masih dibutuhkan konfigurasi tambahan agar fitur upload di FCKEditor dapat berjalan mulus dengan ZK Framework.

Berikut adalah langkah-langkah untuk konfigurasi fitur upload di ZK Framework 3.6.2

  • Copy file distribusi FCKEditor pada root web aplikasi kita
  • Tambahkan baris berikut ini pada web.xml
<servlet>
        <servlet-name>Connector</servlet-name>
        <servlet-class>
            org.zkforge.fckez.connector.ConnectorServlet
        </servlet-class>
        <init-param>
            <param-name>baseDir</param-name>
            <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <load-on-startup>2</load-on-startup>
    </servlet>

    <servlet>
        <servlet-name>SimpleUploader</servlet-name>
        <servlet-class>
            org.zkforge.fckez.uploader.SimpleUploaderServlet
        </servlet-class>
        <init-param>
            <param-name>baseDir</param-name>
            <param-value>/UserFiles/</param-value>
        </init-param>
        <init-param>
            <param-name>debug</param-name>
            <param-value>false</param-value>
        </init-param>
        <init-param>
            <param-name>enabled</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsFile</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsFile</param-name>
            <param-value>
                php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi
            </param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsImage</param-name>
            <param-value>jpg|gif|jpeg|png|bmp</param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsImage</param-name>
            <param-value></param-value>
        </init-param>
        <init-param>
            <param-name>AllowedExtensionsFlash</param-name>
            <param-value>swf|fla</param-value>
        </init-param>
        <init-param>
            <param-name>DeniedExtensionsFlash</param-name>
            <param-value></param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>Connector</servlet-name>
        <url-pattern>/zkau/web/js/ext/FCKeditor/editor/filemanager/connectors/*</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>SimpleUploader</servlet-name>
        <url-pattern>/zkau/web/js/ext/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>
    </servlet-mapping>
  • Tambahkan baris berikut pada file fckconfig.js

FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File';
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image';
FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash';

  • Buatlah forlder UserFiles/File, UserFiles/Image dan UserFiles/Flash pada root direktori web aplikasi. Folder ini merupakan tempat menyimpan file-file yang diupload user.

Jika semua konfigurasi di atas benar, maka sekarang FCKEditor sudah dapat berjalan dengan sempurna lengkap dengan fitur upload gambar/flash atau file.

Semoga membantu 🙂

Advertisements