You are viewing a plain text version of this content. The canonical link for it is here.
Posted to docs@cocoon.apache.org by do...@cocoon.apache.org on 2004/11/06 03:16:45 UTC
[Cocoon Wiki] Updated: WebDAVHTMLArea
Date: 2004-11-05T18:16:45
Editor: RossGardler <rg...@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