RSS Matters

Previously in the RSS column (April 2006) we have discussed using the open-source HTML WYSIWYG editor Nvu to edit HTML pages on the Web2Survey Zope server. The following RSS installment discussed content management systems (CMS), specifically Zope/Plone (May 2006). In the May 2006 RSS installment, the web development technique Ajax was briefly referred to (e.g. XMLHttpRequest). Ajax refers to programming practices that use asynchronous JavaScript. Ajax web development techniques are used my many websites (e.g. Google; Yahoo) to implement responsive and dynamic websites. Effectively, Ajax applications partly duplicate the functionality of Java applets: lightweight mini-applications that are processed inside the client's browser; however, the Ajax platform is more restricted. The practical upshot of this is that a client's session has greater interactivity, speed, and usability. Ajax uses the XMLHttpRequest API to exchange data asynchronously with the web server. Although the XML format is routinely used to exchange data between the server and the client, other formats work as well (e.g. HTML, plain text, etc.). Several web-based HTML editors (see list of editors) utilize JavaScript and the Ajax platform to implement "in-place" editing of HTML documents.

Kupu: A Web Based Editor That Uses Asynchronous Javascript

Kupu is a "document-centric" open source client-side editor for Mozilla (e.g. Firefox), Netscape and Internet Explorer. Kupu was primarily written by (among others) Paul Everitt, Guido Wesdorp and Philipp von Weitershausen. Kupu was inspired by Maik Jablonski's Epoz editor. Kupu has been integrated into a variety of CMS including: Zope, Silva, Plone and Apache Lenya. Kupu uses CSS rather than HTML for layout and presentation and also supports asynchronous saving to the web server.

Setting up the Kupu Editor on Zope

I will start out with a new Zope account and proceed through the steps necessary to edit HTML documents with the Kupu editor. After logging into your Zope account, you should see something like the following (this is a newly created Zope account - for instructions on logging in see June 2005, tutorial 1):

Notice that Zope uses index_html as the default HTML index page rather than index.html or index.htm. Delete your original index_html page and add a new DTML method document from the drop down menu (Make sure you use Method and NOT Document!!):

After the display of the browser window that has the entry fields for the Filesystem Directory View, scroll down and select kupu/common. Name the object kupu, for example:

Next, we need to create a Zope Page Template (ZPT) named kupu_edit that makes the JavaScript libraries available to an editing session. Create a ZPT from the object drop-down menu and name it kupu_edit, for example:

Next, we need to change the default HTML content for the kupu_edit page template. At the URL:

we have the necessary HTML and Javascript to include in the newly created kupu_edit file. Note that YOU ONLY NEED TO CREATE THE kupu_edit ZPT FILE ONCE. It will act as an editing template that accesses the Javascript libraries for all edited documents (we discuss this later):

The contents of this kupu_edit.txt file needs to be placed in the kupu_edit ZPT file. Edit the kupu_edit ZPT file in your root Zope directory by clicking the kupu_edit ZPT link. You should see:

This text needs to be replaced by the contents of the kupu_edit.txt file. Highlight all of this text and push the delete key on the keyboard (i.e. Ctrl-a keys and then press delete). Then select the text from the kupu_edit.txt file and paste it into the window above (i.e. Ctrl-a, Ctrl-c, then Ctrl-v). Click Save Changes. If your editing changes to kupu_edit have been successful, you should see the following (note: there should not be any of the original text from the default creation of the kupu_edit file in the ZPT page template, kupu_edit):

To invoke the kupu editor for any HTML object (or in this case a DTML object - the default Zope index page), follow the HTML object name with the text /kupu_edit For example, using the full URL for the HTML object that you wish to edit, we type the following in the browser URL entry field (notice the /kupu_edit after the index_html object name):

To edit the contents in either the HTML source or WYSIWYG editing mode, click the edit button

(once for HTML source mode; click again to enter into the WYSIWYG editing mode):

You should see the text region is now active for editing or text entry (note the thin bar in front of the "R" of Richard):

Clicking the save button

will allow changes to be saved to the web server for the currently edited HTML file (note: you will be prompted for username-password login IF the directory that contains the HTML is password restricted). After making changes, and saving, you should see the following:

Remember, that once you have created the initial kupu editor folder, and have created the ZPT kupu_edit template, you don't have to create these again. Editing any HTML object or Zope DTML object is done by following the object's URL with /kupu_edit This invokes the kupu editor instance on that object. Additionally, remember that since kupu uses Javascript libraries, you must have Javascript enabled in your browser. Once last suggestion: the URL and object used in this current demonstration are still published. If you wish to experiment with the kupu editor, you can access it by going to the URL:

https://web2survey.unt.edu/users/RichH/index_html/kupu_edit

You WON'T be able to save any changes to the web server since the directory is password protected, but at least you can get an idea of how the kupu editor looks and feels "real time". Good luck!

Please note that information published in Benchmarks Online is likely to degrade over time, especially links to various Websites. To make sure you have the most current information on a specific topic, it may be best to search the UNT Website - http://www.unt.edu . You can also search Benchmarks Online - http://www.unt.edu/benchmarks/archives/back.htm as well as consult the UNT Helpdesk - http://www.unt.edu/helpdesk/ Questions and comments should be directed to benchmarks@unt.edu

RSS Matters

Editing HTML with the Kupu Editor on the Web2Survey Zope Server

By Dr Rich Herrington, ACS Research and Statistical Support Services Consultant

Kupu: A Web Based Editor That Uses Asynchronous Javascript

Setting up the Kupu Editor on Zope

Clicking the save button will allow changes to be saved to the web server for the currently edited HTML file (note: you will be prompted for username-password login IF the directory that contains the HTML is password restricted). After making changes, and saving, you should see the following: