Benchmarks Online

Skip Navigation Links


Page One

Campus Computing News

Summer Hours

Today's Cartoon

RSS Matters

The Network Connection

Link of the Month

WWW@UNT.EDU

Short Courses

IRC News

Staff Activities

Subscribe to Benchmarks Online
    

 Research and Statistical Support - University of North Texas

RSS Matters

Link to the last RSS article here: New Developments with Web Based Surveys on the Web2Survey Zope Server - Ed.

Editing HTML with the Kupu Editor on the Web2Survey Zope Server

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

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):

Zope sample

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!!):

drop down menu

 and name it index_html.  You should see the following:

index page

Next, add a Filesystem Directory View object (choose the second entry):

filesystem directory view   

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:

nameing the directory

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:

creating a page template

After the changes have been committed, you should see:

things so far should look like this

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

https://web2survey.unt.edu/Utilities/kupu_edit.txt

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):

content for page template

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:

edit page template

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):

page template

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):

You should see something like the following after the kupu editor has started:

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):

text region

Clicking the save button 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:

HTML file sample

Browsing the URL (entering into the browser URL entry field and clicking "GO"):

 URL

Displays the Zope index_html webpage in the browser window:

webpage

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!

Related Websites

Kupu Editor
Kupu Documentation
Lenya Kupu Documentation
O'Reilly Article:  Rich Web Text Editing with Kupu
Kupu Zope Project
Review of WYSIWYG Editors
Using WYSIWYG Editors with Zope
Zope Labs


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

Return to top