I've just replaced the old html editor in the editwizards with a new one in cvs. Here are some remarks.
The new editor I've used is htmlArea and can be found at:
http://www.interactivetools.com/products/htmlarea/
It is customized to show less buttons than default and a customized "create link" button is added that has a dropdown to select the target of the link. I've also added a button to validate the field. This button can be useful when too much text was entered into the field. Because the validate function of editwizards are not called in wysiwyg mode you will get in trouble. This button can be used to call the validate function of the editwizards to restore the save button in case they were disabled. When in text mode the validate function of de editwizards work just like they do for normal fields.
If you want to customize the htmlarea to show more or less buttons you only have to edit my-htmlarea.js (config.toolbar = ...).
This change was made CVS HEAD. It shouldn't be to much trouble to replace the editor in MMBase 1.6 too. You just have to add the htmlarea directory and make some small changes to wizard.xsl and editwizard.jsp. I've attached a normal and a unified diff of the changes that are done in CVS HEAD.
For the future I think it it will be easy to extend this editor with a popup to select a MMBase node, for example an article or an image. I think it will be possible to show the image in the htmlarea and in case of an article we could make the htmlarea add an attribute like mmnode to the a tag. This attribute can be parses serverside to make it work with richtext fields.
Have fun with this new editor,
Jaco
P.s. keesj already created a screenshot :) see:
http://carlit.mine.nu/~keesj/UberCMS.png
Index: data/xsl/wizard.xsl
===================================================================
RCS file: /usr/local/cvs/applications/editwizard/templates/data/xsl/wizard.xsl,v
retrieving revision 1.101
diff -u -r1.101 wizard.xsl
--- data/xsl/wizard.xsl 14 Nov 2003 14:45:06 -0000 1.101
+++ data/xsl/wizard.xsl 9 Dec 2003 15:47:43 -0000
@@ -224,28 +224,36 @@
<script language="javascript"
src="{$javascriptdir}editwizard.jsp{$sessionid}?referrer={$referrer}&language={$language}">
<xsl:comment>help IE</xsl:comment>
</script>
- <script language="javascript" src="{$javascriptdir}wysiwyg.js">
+ <script language="javascript" src="../htmlarea/htmlarea.js">
+ <xsl:comment>help IE</xsl:comment>
+ </script>
+ <script language="javascript" src="../htmlarea/lang/en.js">
+ <xsl:comment>help IE</xsl:comment>
+ </script>
+ <script language="javascript" src="../htmlarea/dialog.js">
+ <xsl:comment>help IE</xsl:comment>
+ </script>
+ <style type="text/css">@import url(../htmlarea/htmlarea.css);</style>
+ <script language="javascript" src="../htmlarea/my-htmlarea.js">
<xsl:comment>help IE</xsl:comment>
</script>
<script language="javascript">
<xsl:text disable-output-escaping="yes">
<![CDATA[<!--
window.history.forward(1);
+ ]]></xsl:text>
+
+ // Store htmlarea names.
+ var htmlAreas = new Array();
+ <xsl:for-each select="//[EMAIL PROTECTED]'html']">
+ htmlAreas[htmlAreas.length] = '<xsl:value-of select="@fieldname"/>';
+ </xsl:for-each>
+
+ <xsl:text disable-output-escaping="yes">
+ <![CDATA[
-->
]]></xsl:text>
</script>
- <xsl:if test="//[EMAIL PROTECTED]'html']">
-<!-- no need to add the wysiwyg button bar if there are not fields of this type -->
- <script language="javascript">
- <xsl:text disable-output-escaping="yes">
- <![CDATA[<!--
- if (browserutils.ie5560win) {
- window.attachEvent("onload",start_wysiwyg);
- }
- -->
- ]]></xsl:text>
- </script>
- </xsl:if>
<xsl:call-template name="extrajavascript"/>
</xsl:template>
@@ -431,6 +439,9 @@
<span>
<xsl:text disable-output-escaping="yes"><textarea
name="</xsl:text>
+ <xsl:value-of select="@fieldname"/>
+ <xsl:text>"
+ id="</xsl:text>
<xsl:value-of select="@fieldname"/>
<xsl:text>"
dttype="</xsl:text>
Index: javascript/editwizard.jsp
===================================================================
RCS file: /usr/local/cvs/applications/editwizard/templates/javascript/editwizard.jsp,v
retrieving revision 1.33
diff -u -r1.33 editwizard.jsp
--- javascript/editwizard.jsp 12 Nov 2003 14:15:22 -0000 1.33
+++ javascript/editwizard.jsp 9 Dec 2003 15:48:02 -0000
@@ -124,8 +124,15 @@
if (firstfield!=null) firstfield.focus();
}
-
doValidateAndUpdateButtons();
+
+ // Start the htmlarea's.
+ for (var i = 0; i < htmlAreas.length; i++) {
+ var editor = new HTMLArea(htmlAreas[i]);
+ customize(editor, "../htmlarea/");
+ editor.generate();
+ htmlAreas[i] = editor;
+ }
}
function doOnSubmit(form) {
@@ -327,7 +334,6 @@
}
function doStartWizard(fieldid,dataid,wizardname,objectnumber,origin) {
- doCheckWysiwyg();
var fld = document.getElementById("hiddencmdfield");
fld.name = "cmd/start-wizard/"+fieldid+"/"+dataid+"/"+objectnumber+"/"+origin+"/";
fld.value = wizardname;
@@ -335,7 +341,6 @@
}
function doGotoForm(formid) {
- doCheckWysiwyg();
var fld = document.getElementById("hiddencmdfield");
fld.name = "cmd/goto-form//"+formid+"//";
fld.value = "";
@@ -344,8 +349,6 @@
}
function doSendCommand(cmd, value) {
- doCheckWysiwyg();
-
var fld = document.getElementById("hiddencmdfield");
fld.name = cmd;
fld.value = "";
@@ -414,7 +417,15 @@
document.body.scrollTop = 0;
}
+function saveHtmlAreas() {
+ for (var i = 0; i < htmlAreas.length; i++) {
+ var editor = htmlAreas[i];
+ editor._textArea.value = editor.getHTML();
+ }
+}
+
function doSave() {
+ saveHtmlAreas();
var allvalid = doValidateAndUpdateButtons();
if (allvalid) {
setButtonsInactive();
@@ -424,6 +435,7 @@
}
function doSaveOnly() {
+ saveHtmlAreas();
var allvalid = doValidateAndUpdateButtons();
if (allvalid) {
setButtonsInactive();
@@ -447,8 +459,3 @@
doSendCommand("","");
}
-function doCheckWysiwyg() {
- try {
- if (wysiwyg) wysiwyg.blur();
- } catch (e) {}
-}
Index: style/wizard.css
===================================================================
RCS file: /usr/local/cvs/applications/editwizard/templates/style/wizard.css,v
retrieving revision 1.9
diff -u -r1.9 wizard.css
--- style/wizard.css 21 Aug 2002 17:27:40 -0000 1.9
+++ style/wizard.css 9 Dec 2003 15:48:02 -0000
@@ -11,7 +11,6 @@
*/
@import url("base.css");
[EMAIL PROTECTED] url("wysiwyg.css");
table.body {
Index: data/xsl/wizard.xsl
===================================================================
RCS file: /usr/local/cvs/applications/editwizard/templates/data/xsl/wizard.xsl,v
retrieving revision 1.101
diff -r1.101 wizard.xsl
227c227,237
< <script language="javascript" src="{$javascriptdir}wysiwyg.js">
---
> <script language="javascript" src="../htmlarea/htmlarea.js">
> <xsl:comment>help IE</xsl:comment>
> </script>
> <script language="javascript" src="../htmlarea/lang/en.js">
> <xsl:comment>help IE</xsl:comment>
> </script>
> <script language="javascript" src="../htmlarea/dialog.js">
> <xsl:comment>help IE</xsl:comment>
> </script>
> <style type="text/css">@import url(../htmlarea/htmlarea.css);</style>
> <script language="javascript" src="../htmlarea/my-htmlarea.js">
233a244,253
> ]]></xsl:text>
>
> // Store htmlarea names.
> var htmlAreas = new Array();
> <xsl:for-each select="//[EMAIL PROTECTED]'html']">
> htmlAreas[htmlAreas.length] = '<xsl:value-of select="@fieldname"/>';
> </xsl:for-each>
>
> <xsl:text disable-output-escaping="yes">
> <![CDATA[
237,248d256
< <xsl:if test="//[EMAIL PROTECTED]'html']">
< <!-- no need to add the wysiwyg button bar if there are not fields of this type -->
< <script language="javascript">
< <xsl:text disable-output-escaping="yes">
< <![CDATA[<!--
< if (browserutils.ie5560win) {
< window.attachEvent("onload",start_wysiwyg);
< }
< -->
< ]]></xsl:text>
< </script>
< </xsl:if>
433a442,444
> <xsl:value-of select="@fieldname"/>
> <xsl:text>"
> id="</xsl:text>
Index: javascript/editwizard.jsp
===================================================================
RCS file: /usr/local/cvs/applications/editwizard/templates/javascript/editwizard.jsp,v
retrieving revision 1.33
diff -r1.33 editwizard.jsp
127d126
<
128a128,135
>
> // Start the htmlarea's.
> for (var i = 0; i < htmlAreas.length; i++) {
> var editor = new HTMLArea(htmlAreas[i]);
> customize(editor, "../htmlarea/");
> editor.generate();
> htmlAreas[i] = editor;
> }
330d336
< doCheckWysiwyg();
338d343
< doCheckWysiwyg();
347,348d351
< doCheckWysiwyg();
<
416a420,426
> function saveHtmlAreas() {
> for (var i = 0; i < htmlAreas.length; i++) {
> var editor = htmlAreas[i];
> editor._textArea.value = editor.getHTML();
> }
> }
>
417a428
> saveHtmlAreas();
426a438
> saveHtmlAreas();
450,454d461
< function doCheckWysiwyg() {
< try {
< if (wysiwyg) wysiwyg.blur();
< } catch (e) {}
< }
Index: style/wizard.css
===================================================================
RCS file: /usr/local/cvs/applications/editwizard/templates/style/wizard.css,v
retrieving revision 1.9
diff -r1.9 wizard.css
14d13
< @import url("wysiwyg.css");
