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🙂

One Response to Konfigurasi FCKEditor untuk ZK 3.6.2

  1. Hi,

    I’ve been working whit the FCKEditor and is pretty cool, an i think you can help me, i need use the FCKeditorAPI.EditorWindow to get the selected Html but tells me is undefinded i search in many page’s but no one cant helpe, hope’s you cant….

    Thanks…

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: