CKeditor or FCKeditor

CKeditor is a third party rich text editor (WYSIWYG) that can be used instead of the HTML TextArea control. CKeditor provides powerful visual text editing functionality for your pages.

CKeditor installation file as well as CKeditor documentation can be found at the CKeditor website.

There are two common methods of installing CKeditor for use in CCS projects.

1. The simplest way is to copy CKeditor files directly to your project folder on the server. In this case you do not need to publish CKeditor files when publishing your CCS project.
2. Another method is to copy CKeditor files to a sub-folder of your CCS project. In this case you need to configure your project publishing settings so that CKeditor files will be published to the server. Open CCS project settings and on the Publishing tab select "All files with extensions", then add all of CKeditor file extensions to the list. The downside to this method is that publishing CKeditor files will increase project publishing time.

In CCS the CKeditor can be used by selecting it from the Forms tab of the Toolbox. When selected, the CKeditor configuration dialog will appear as shown below.

The options shown in the dialog are same as in the Attach CKeditor action, which is automatically added the On Load client event of the TextArea control created at the same time. Selecting this action exposes CKeditor parameters configured via the above dialog where you can further modify them as needed. As you may suspect, you could also add CKeditor to your page by manually attaching the Attach CKeditor action to the On Load client event of an existing TextArea and configuring it.

Using CKeditor with Java (Servlets & JSP)

If you use Java, you should modify common classes after installing CKeditor because the file information about CK connector servlets, their parameters and servlet mapping are to be specified in web.xml file.

Add the code below to server side classpath. Runtime libraries can be used for this project property.

<servlet>
        <servlet-name>Connector</servlet-name>
        <servlet-class>com.fredck.CKeditor.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>true</param-value>
		</init-param>
        <load-on-startup>2</load-on-startup>
    </servlet>
    <servlet>
        <servlet-name>SimpleUploader</servlet-name>
        <servlet-class>com.fredck.CKeditor.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>true</param-value>
        </init-param>
        <init-param>
            <param-name>enabled</param-name>
            <param-value>false</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>3</load-on-startup>
    </servlet>
  <servlet-mapping>
    <servlet-name>Connector</servlet-name>
    <url-pattern>/<CKBase>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
  </servlet-mapping>
  <servlet-mapping>
    <servlet-name>SimpleUploader</servlet-name>
    <url-pattern>/<CKBase>/editor/filemanager/upload/simpleuploader</url-pattern>
  </servlet-mapping>

See also: