XForms/Rich Text Editor

From Wikibooks, the open-content textbooks collection

< XForms
Jump to: navigation, search

Contents

[edit] Motivation

You want to allow users to add rich-text markup to a text area. You want users to be able to use a WYSIWYG editor in the browser.

[edit] Method

We will use an OpenSource richtext WYSIWYG editor called FCKEdit. We will then use the XBL (XML Binding Language) to bind the editor to a control. FCKEdit is written in JavaScript but can be used just by adding a single line to your XForms that references the JavaScript library.

[edit] Steps

Download the FCKEditor code from here: Create a folder call rte (for rich text editor) in your XForms project. In that folder you will need to place the following files correctly in the file system:

  • FCKEditor - which can be found in the main folder of the FCKeditor download under the main fckeditor folder
  • rte/rte-xforms-fck.js - the XBL binding file here or in the IBM Developerworks article.
  • rte/style-rte.css - a file that styles the rich text. There is a sample here

You then need to make sure that your HTML head has the following code:

<head>
  <script type="text/javascript" src="rte/fckeditor.js"></script>
  <script type="text/javascript" src="rte/rte-xforms-fck.js"></script>
  <link href="rte/style-rtf.css" rel="stylesheet" type="text/css" />
</head>

Note, the FCKEditor uses a separate window to popup an Text Editor. Some web browsers (notably FireFox) may need to have a security setting changed if you are testing this from a local file system. To do this you need to do the following:

  • Enter "about.config" in the Browser URL
  • Add security.fileuri.strict_origin_policy to the filter
  • Double click on the line and make sure the value of true gets changed to be false

[edit] Sample Blog Editor Form Source Code

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xforms="http://www.w3.org/2002/xforms">
<head>
  <title>XForms with Rich Text Editor</title>
  <!-- this is the main JavaScript file called by the FCKEditor -->
  <script type="text/javascript" src="FCKEditor/fckeditor.js"></script>
 
  <!-- this is JavaScript file that tells the FCK editor how to put the data into the model -->
  <script type="text/javascript" src="rte/rte-xforms-fck.js"/>
 
  <!-- this is stylesheet that you can customize to change the way the RTF editor looks -->
  <link href="rte/style-rte.css" rel="stylesheet" type="text/css" />
  <style type="text/css">
    @namespace xforms url(http://www.w3.org/2002/xforms);
    xforms|trigger[appearance='rte'] {
       -moz-binding:url('rte-xforms-fck.xbl#rte');}
    xforms|input, xforms|trigger {display: block;}         
    xforms|label { font-weight: bold;}    
  </style>
 
  <xforms:model id="mMain">
    <xforms:instance id="iMain">
      <blog xmlns="">
        <subject>Sample Blog Entry </subject>
        <content>
          <span xmlns="http://www.w3.org/1999/xhtml">This is <b> my 
            sample text </b></span>
 
        </content>
        <tags/>
      </blog>
    </xforms:instance>
    <xforms:submission id="sMain" action="http://xformstest.org/cgi-bin/showinstance.sh"
        method="post"/>
  </xforms:model>
</head>
<body>
  <h3>Sample Blog Editor Demonstrating Rich Text Widgets Embedded
    within an XForms (FCKEditor edition)</h3>
  <xforms:input ref="/blog/subject">
    <xforms:label>Subject: </xforms:label>
  </xforms:input>
  <xforms:trigger ref="/blog/content" appearance="rte">
    <xforms:label>Content: </xforms:label>
  </xforms:trigger>
  <!-- The placeholder for the FCKeditor -->
  <div id="floatingText" style="background-color: white; border-style:solid; border-width:2px; width:600px; height:auto; position: absolute; top: 20px; left: 80px; display:none">
    <textarea id="testA" name="testA" style="width:580px;"></textarea>
    <br/>
    <input type="button" value ="close" onclick="closeTextDiv();"> </input>
    <input type="button" value ="save" onclick="saveTextToNode();"> </input>
  </div>
  <xforms:submit submission="sMain">
    <xforms:label>Show Instance</xforms:label>
  </xforms:submit>
  <!-- Attach the Editor to the XForms model -->
  <script type="text/javascript">    
    associateRTE('testA', document.getElementById("mMain")) ;
  </script>
</body>
</html>

[edit] Rich Text Editor with DOJO JavaScript Libraries

[edit] Reference

Although there were frequent discussions about using rich text editors with XForms, the initial article about using FCKeditor with XForms was posted on the IBM Developerworks web site in October 2007 in an article titled Extending XForms to Enable Rich Text Editing by Steve K Speicher and Andy Smith. These instructions with just a few modifications should be attributed to them.


Next Page: Submit | Previous Page: Search Form

Home: XForms

Retrieved from "http://en.wikibooks.org/wiki/XForms/Rich_Text_Editor"