The Richtext Functional Reference

Richtext is text which contains (links to) other objects. For instance a text that contains images, links to pages in the same web application, or links to external web pages. This text is saved in MMBase as XML. The nice thing about saving text as XML is that all references to other objects are real MMBase relations. So when the referred object is deleted, the link in the richtext is also automatically removed. Another advantage is that with XSLT (xml-style sheets) the conversion to HTML is straightforward (and some say easier than JSP).

Richtext should not be confused with the html-area, used in the editwizard. The text of html-area in the editwizard is saved in MMBase as HTML. Links in the HTML are urls. This means that when the referred object is deleted, the link will not automatically be removed. Another disadvantage is that the HTML can contain undesirable code, like Microsoft Word styles that are copied into the html-area.

Throughout this document the MyRichText application is used as the example application for the richtext editor. So to experiment with the examples in this document both the richtext editor has to be installed in your webapp and the MyRichText application has to be deployed. All the path in this document assume that the webapp which you are using has the name richtext.

The database definition of the richtext field with the name body in the texts.xml builder looks like:

<datatype base="mmxf" xmlns="http://www.mmbase.org/xmlns/datatypes" />
<db>
   <name>body</name>
   <type key="false" notnull="false" size="64000" state="persistent">XML</type>
</db>

The richtext editor is based on kupu. MMBase use kupu to show the richtext field in your builder, with all the richtext functionality. The present implementation of the richtext editor assumes that there is at most one richtext field in an MMBase node. After saving the object in the richtext editor, the HTML produced by kupu is translated into XML by MMBase.

The text in the richtext editor shown in the previous section is saved as the following XML.

<mmxf xmlns="http://www.mmbase.org/xmlns/mmxf" version="1.1">
<p>
   <a id="_1134140609"/>
   Richtext is text which contains (links to) other objects.
</p>
<p>
   Richtext should not be confused with the html-area, used in the editwizard.
</p>
<p>
   <table class="plain">
      <tr>
         <td> </td>
         <td>TEXT</td>
         <td>HTML</td>
         <td>XML </td>
      </tr>
      <tr>
         <td>Link to another object</td>
         <td>tags </td>
         <td>hyperlink </td>
         <td>real relation </td>
      </tr>
      <tr>
         <td>Templating</td>
         <td>JSP </td>
         <td>JSP</td>
         <td>XSLT </td>
      </tr>
   </table>
</p>
<p><a id="_1134140611"/></p>
</mmxf>

When you look in one of the default MMBase you will see that the objects, linked in the text, are related to the object containing the text field.

This XML can parsed by an XML style sheet (XSLT) to generate an HTML page.

One of the basic things that have to be done when creating HTML from XML to create hyperlinks from the idrels in the XML. To make this possible we have to tell MMBase how a link to a related object looks like. The mapping from idrels to hyperlinks is done in the

<functionlist>
  <function 
    name="url"
    key="{REQUEST.getContextPath}/{INITPARAM.npbsales.home}?article={NODE.number}&amp;template=article"
    >
    <class>org.mmbase.util.functions.PatternNodeFunctionProvider</class>
  </function>
</functionlist>

Most of the parameters used in the function definition are generated automatically, the INITPARAM.xyz are specified in the /richtext/WEB-INF/web.xml. The parameters are handled by the org.mmbase.util.functions.PatternNodeFunctionProvider.java.

You can use the list.jsp which is also used by the editwizards to open the richtext editor. The request parameters that are new as compared to the use of list.jsp for the editwizards are: wizardjsp, kupu_back, tools and link_nodetypes. The entire url is explained in the following table. Please have a look at the editwizard documentation to learn more about the request parameters of list.jsp.

The kupu functionality can be found in the middle and the right panel of the richtext editor. In the richtext editor a selection has been made from all the possibilities kupu offers and some extra functionality has been added. This section gives an overview of the functionality from kupu that has beenintegrated in the richtext editor and the extra functionality added.

TODO

TODO

TODO

The chapter first shows how the MyRichNews generates HTML from the XML stored in the richtext field. Then an example shows how to reuse parts of the example to build your own HTML pages.

<mm:include referids="subcat@cat,class" page="${_node.url}" escape="none" debug="html" />

<mm:present referid="template">
  <mm:include  page="search.div.jspx"><mm:param name="class" value="left" /></mm:include>
  <mm:include  referids="subcat@cat" page="${template}.div.jspx" escape="none" debug="html" />
</mm:present>

<mm:formatter 
  xmlns:mm="http://www.mmbase.org/mmbase-taglib-2.0" 
  xslt="xslt/2xhtml.xslt" escape="none">
   <mm:listrelationscontainer role="idrel" searchdir="destination">
     <mm:listrelations>
       <mm:relatednode>
         <mm:listrelations role="idrel" searchdir="destination">
           <mm:relatednode />
         </mm:listrelations>
       </mm:relatednode>
     </mm:listrelations>
   </mm:listrelationscontainer>
   <mm:field name="body" />
</mm:formatter>

<div class="block article">
   <h1>Richtext !!!</h1>
   <div class="intro">
      <p></p>
   </div>
   <div class="objects">
      <div class="mmxf">
         <p>
            <a onclick="window.open('/richtext/mmbase/images/1193', 'MMBeest', 'width=404,height=720');"
               href="javascript: void(0);"
               title="MMBeest"
               id="_1134211110">
               <img src="/richtext/mmbase/images/1183"
                    alt="MMBeest"
                    class="image-right"
                    height="100" width="54"/>
            </a>
            Richtext is text which contains (links to) other objects.
         </p>
         <p>Richtext should not be confused with the html-area, used in the editwizard.</p>
         <table class="plain">
            <tr><td></td><td>TEXT</td><td>HTML</td><td>XML</td></tr>
            <tr><td>Link to another object</td><td>tags</td><td>hyperlink</td><td>real relation</td></tr>
            <tr><td>Templating</td><td>JSP</td><td>JSP</td><td>XSLT</td></tr>
         </table>
         <p>
            <div id="" class="float note left">
               <div class="mmxf"><p>You should use Tomcat 5.5 and JDK 1.5</p></div>
            </div>
         </p>
      </div>
   </div>
   <div class="outtro">
      <p><a href=".?cat=347" class="navigate">&lt; back</a></p>
   </div>
</div>

The following documents can be used for further reading.