cocoon-docs mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From d...@cocoon.apache.org
Subject [Cocoon Wiki] Updated: WebDAVHTMLArea
Date Sat, 06 Nov 2004 02:16:45 GMT
   Date: 2004-11-05T18:16:45
   Editor: RossGardler <rgardler@apache.org>
   Wiki: Cocoon Wiki
   Page: WebDAVHTMLArea
   URL: http://wiki.apache.org/cocoon/WebDAVHTMLArea

   no comment

Change Log:

------------------------------------------------------------------------------
@@ -1,14 +1,14 @@
 = HTMLArea =
 
-This tutorial shows you how to extends the "step4" sample of Cocoon's WebDAV block with the
HTMLArea control for WYSIWYG editing.
+This tutorial shows you how to extend the "step4" sample of Cocoon's WebDAV block with the
HTMLArea control for WYSIWYG editing.
 
-the complete "step4" folder to "step6".
+Copu the complete "step4" folder to a new "step6" folder.
 
-To get the latest CVS version of HTMLArea follow the instructions on its [http://sourceforge.net/cvs/?group_id=69750
sourceforge site].
+Get the version 3.0rc1 (or later) of HTMLArea. See instructions on the HTMLArea [http://sourceforge.net/cvs/?group_id=69750
sourceforge site].
 
 Within the "step6" folder create another folder named "editor" and copy the contents of the
"htmlarea" folder you just checked out into the "editor" folder.
 
-Add the following entry to the sitemap:
+Add the following entry to the "sitemap.xmap" file in the "step6" folder (after the "write/**"
match is a good place):
 
 {{{
 <map:match pattern="editor/**">
@@ -16,32 +16,130 @@
 </map:match>
 }}}
 
-Then open your "file2html.xsl" stylesheet and change the template matching the root element
to look like this:
+Then open your "file2html.xsl" stylesheet (in the step6/styles" directory) and change the
template matching the root element to look like this:
 
 {{{
 <xsl:template match="/page">
   <html>
     <head>
+      <!-- Configure the path to the editor.  We make it relative now, so that the
+      example ZIP file will work anywhere, but please NOTE THAT it's better to
+      have it an absolute path, such as '/htmlarea/'. -->
       <script type="text/javascript">
-        <xsl:attribute name="src"><xsl:value-of select="substring-before($requestURI,
$sitemapURI)"/>editor/htmlarea.js</xsl:attribute>
-      </script>  
+        _editor_url = "<xsl:value-of select="substring-before($requestURI, $sitemapURI)"/>editor";
+        _editor_lang = "en";
+      </script>
+      
+      <!-- load the main HTMLArea file, this will take care of loading the CSS and
+      other required core scripts. -->
       <script type="text/javascript">
-        <xsl:attribute name="src"><xsl:value-of select="substring-before($requestURI,
$sitemapURI)"/>editor/htmlarea-lang-en.js</xsl:attribute>
+        <xsl:attribute name="src"><xsl:value-of select="substring-before($requestURI,
$sitemapURI)"/>editor/htmlarea.js</xsl:attribute>
       </script>  
+      
+      <!-- load the plugins -->
       <script type="text/javascript">
-        <xsl:attribute name="src"><xsl:value-of select="substring-before($requestURI,
$sitemapURI)"/>editor/dialog.js</xsl:attribute>
-      </script>  
-      <style type="text/css">
-        @import url(<xsl:value-of select="substring-before($requestURI, $sitemapURI)"/>editor/htmlarea.css);
-      </style>
+        // WARNING: using this interface to load plugin
+        // will _NOT_ work if plugins do not have the language
+        // loaded by HTMLArea.
+  
+        // In other words, this function generates SCRIPT tags
+        // that load the plugin and the language file, based on the
+        // global variable HTMLArea.I18N.lang (defined in the lang file,
+        // in our case "lang/en.js" loaded above).
+  
+        // If this lang file is not found the plugin will fail to
+        // load correctly and NOTHING WILL WORK.
+  
+        //HTMLArea.loadPlugin("TableOperations");
+        //HTMLArea.loadPlugin("SpellChecker");
+        //HTMLArea.loadPlugin("FullPage");
+        //HTMLArea.loadPlugin("CSS");
+        //HTMLArea.loadPlugin("ContextMenu");
+        //HTMLArea.loadPlugin("HtmlTidy");
+        //HTMLArea.loadPlugin("ListType");
+        //HTMLArea.loadPlugin("CharacterMap");
+        //HTMLArea.loadPlugin("DynamicCSS");
+      </script>
+      
       <script type="text/javascript">
-        var editor = null;
-        function initEditor() {
-          editor = new HTMLArea("para");
-          var cfg = editor.config;
-          cfg.editorURL = "<xsl:value-of select="substring-before($requestURI, $sitemapURI)"/>editor/";
-          editor.generate();
+      var editor = null;
+      
+      function initEditor() {
+      
+        // create an editor for the "para" textbox
+        editor = new HTMLArea("para");
+      
+        // register the FullPage plugin
+        //editor.registerPlugin(FullPage);
+      
+        // register the SpellChecker plugin
+        //editor.registerPlugin(TableOperations);
+      
+        // register the SpellChecker plugin
+        //editor.registerPlugin(SpellChecker);
+        
+        // register the HtmlTidy plugin
+        //editor.registerPlugin(HtmlTidy);
+      
+        // register the ListType plugin
+        //editor.registerPlugin(ListType);
+      
+        //editor.registerPlugin(CharacterMap);
+        //editor.registerPlugin(DynamicCSS);
+      
+        // register the CSS plugin
+        /*editor.registerPlugin(CSS, {
+          combos : [
+            { label: "Syntax:",
+                         // menu text       // CSS class
+              options: { "None"           : "",
+                         "Code" : "code",
+                         "String" : "string",
+                         "Comment" : "comment",
+                         "Variable name" : "variable-name",
+                         "Type" : "type",
+                         "Reference" : "reference",
+                         "Preprocessor" : "preprocessor",
+                         "Keyword" : "keyword",
+                         "Function name" : "function-name",
+                         "Html tag" : "html-tag",
+                         "Html italic" : "html-helper-italic",
+                         "Warning" : "warning",
+                         "Html bold" : "html-helper-bold"
+                       },
+              context: "pre"
+            },
+            { label: "Info:",
+              options: { "None"           : "",
+                         "Quote"          : "quote",
+                         "Highlight"      : "highlight",
+                         "Deprecated"     : "deprecated"
+                       }
+            }
+          ]
+        });
+      */
+        // add a contextual menu
+        //editor.registerPlugin("ContextMenu");
+      
+        // load the stylesheet used by our CSS plugin configuration
+        //editor.config.pageStyle = "@import url(custom.css);";
+      
+        editor.generate();
+        return false;
+      }
+      
+      HTMLArea.onload = initEditor;
+      
+      function insertHTML() {
+        var html = prompt("Enter some HTML code here");
+        if (html) {
+          editor.insertHTML(html);
         }
+      }
+      function highlight() {
+        editor.surroundHTML('<span style="background-color: yellow">', '</span>');
+      }
       </script>
     </head>
     <body onload="initEditor()">
@@ -60,38 +158,26 @@
 </xsl:template>
 }}}
 
-In the latest until now (Okt 1, 2003) beta version of HTMLArea for CVS are changes in languages
support so in previews .xsl we have to modify the path to "en.js" as:
-
-{{{
-...
-      <script type="text/javascript">
-        <xsl:attribute name="src"><xsl:value-of select="substring-before($requestURI,
$sitemapURI)"/>editor/lang/en.js</xsl:attribute>
-      </script>  
-...
-}}}
-
-because HTMLarea is still beta we must to check if this example is up to date. (stavros)
-
-Change your textarea to have to have 100 cols and 30 rows:
+Change your textarea to have to have 100 cols and 30 rows and give it an id of "para":
 
 {{{
 <xsl:template match="page/content/para">
   <p>para:<br />
-    <textarea name="para" cols="120" rows="30">
+    <textarea id="para" name="para" cols="120" rows="30">
       <xsl:copy-of select="node()"/>
     </textarea>
   </p>
 </xsl:template>
 }}}
 
-Change all contents to contain only a single "para" element.
+Change all files in the "repo" directory (and its subdirectories) to contain only a single
"para" element.
 
-This already works quite nicely. However there is a flaw. If you look at your edited files
the generated HTML is escaped.
+You can now view your work by visiting [http://127.0.0.1:8888/samples/blocks/webdav/step6/repo/].
This works quite nicely, however there is a flaw. If you look at your edited files the generated
HTML is escaped.
 
 The !RequestGenerator has a special feature that allows you to put XML in request parameters
and this XML gets fed into the pipeline as SAX events and gets processed by the !SourceWritingTransformer
appropriately. All you have to do is to give your request parameter a name that starts with
"xml:". However this does not work in our case as HTMLArea does not generate valid XML but
HTML.
 
 The solution at hand is to use the HTMLTransformer.
-Declare it at the beginning of the sitemap right after the !TraversableGenerator:
+Declare it at the beginning of the sitemap, in the "components" element, right after the
!TraversableGenerator:
 
 {{{
   <map:transformers default="xalan">
@@ -101,7 +187,7 @@
   </map:transformers>
 }}}
 
-"jtidy-config.txt" has to be created with the following content:
+"jtidy-config.txt" has to be created in the "step6" directory with the following content:
 
 {{{
 output-xhtml: no

Mime
View raw message