XForms/CKEditor

Motivation

You want to be able to add HTML markup to a textarea.

Method

We will use the CKEditor JavaScript libraries. This demo was done using version 3.2.

Steps:

1. Download the source code from: CKEditor web site.
2. Uncompress the zip file on your local file system
3. Change any occurrences of "&" to & a m p ; and remove & n b s p ; and & c o p y ; in the HTML files to make the files well formed XHTML files so that eXist can index them. The following files in the 3.2 release will need to be modified:
   1. ckeditor/CHANGES.html
   2. ckeditor/_source/plugins/wsc/dialogs/ciframe.html
   3. ckeditor/_source/plugins/wsc/dialogs/tmpFrameset.html
   4. ckeditor/plugins/wsc/dialogs/ciframe.html
   5. ckeditor/plugins/wsc/dialogs/tmpFrameset.html
4. Drag the main ckeditor folder into eXist. It should immediately index all html files and store all non-XML files (javascript, css etc.) as binaries.
5. Note: this does not seem to be possible. Change the Configuration file to not encode the XML.

Failure to follow these step 3 above will result in the following error message:

   XMLDB exception caught:
   Failed to invoke method parse in class org.exist.xmlrpc.RpcConnection:
   org.xml.sax.SAXParseException: The entity name must immediately follow the '&' in the entity reference.

This can be attempted by editing the config.js file.(see Config File Parameters )

1. Add the following line to config.js
   1. config.HtmlEncodeOutput = 'false';
2. Replace the sample_postdata.php with the following sample_postdata.xq

Sample XQuery to Echo Post Data

In the _samples folder you will find several samples of how to use CKEditor. Each of these HTML files has an HTML form with the following line:

<form action="sample_posteddata.xq" method="post">

The following program can be used as a substitute for the sample_postdata.php file.

sample_postdata.xq

xquery version "1.0";
declare option exist:serialize "method=xml media-type=text/xml omit-xml-declaration=yes indent=yes";

(: Get the content of the editor1 parameter :)
let $editor1 := request:get-parameter('editor1', '')

(: wrap the content in a div to make sure we have well-formed XML :)
let $wrapped-content := concat('<div>', $editor1, '</div>')

(: parse the escaped text so that we now have true XML markup :)
let $data-to-save := util:parse($wrapped-content)
return
<results>
  {$data-to-save}
</results>

Configuration File for XML Systems

CKEditor has a very large number of configuration options. They are set by editing the config.js file in the main CKEditor directory.

The following changes to the CKEditor configuration file should work but it does not seem to have the correct behavior.

config.js

CKEDITOR.editorConfig = function( config )
{
   // Define changes to default configuration here. For example:
   // config.language = 'fr';
   // config.uiColor = '#AADC6E';
	
   // This should turn off encoding of the XML files as they are sent to the server
   config.HtmlEncodeOutput = false;
   config.entities = false;
};