Enabling WYSIWYG

Prev	Chapter 10. Advanced Topics	Next

+======= + +Enabling WYSIWYG

Prev	Chapter 9. Advanced Topics	Next

Enabling WYSIWYG

by Nima Mazloumi

+>>>>>>> 1.8 OpenACS docs are written by the named authors, and may be edited by OpenACS documentation staff. -

Most of the forms in OpenACS are created using the form builder, see Section , “Using Form Builder: building html forms dynamically”. For detailed information on the - API take a look here.

The following section shows how you can modify your form to allow WYSIWYG functionalities.

Convert your page to use <code>ad_form</code> (some changes but worth it)

Here an examples. From:

Most of the forms in OpenACS are created using the form builder, see Using Form Builder: building html forms dynamically. For detailed information on the + API take a look here.

The following section shows how you can modify your form to allow WYSIWYG functionalities.

Convert your page to use ad_form (some changes but worth it)

Here an examples. From:

 	template::form create my_form
-	template::element create my_form my_form_id -label "The ID" -datatype integer -widget hidden
-	template::element create my_form my_input_field_1 -html { size 30 } -label "Label 1" -datatype text -optional
-	template::element create my_form my_input_field_2 -label "Label 2" -datatype text -help_text "Some Help" -after_html {<a name="#">Anchor</a>}
+	template::element create my_form my_form_id -label "The ID" -datatype integer -widget hidden
+	template::element create my_form my_input_field_1 -html { size 30 } -label "Label 1" -datatype text -optional
+	template::element create my_form my_input_field_2 -label "Label 2" -datatype text -help_text "Some Help" -after_html {<a name="#">Anchor</a>}

To:

 	ad_form -name my_form -form {
 		my_form_id:key(acs_object_id_seq)
  		{my_input_field_1:text,optional
-               {label "Label 1"}
+               {label "Label 1"}
                {html {size 30}}}
       	{my_input_field_2:text
-               {label "Label 2"}
-               {help_text "Some Help"}
+               {label "Label 2"}
+               {help_text "Some Help"}
 	       	   {after_html
-               {<a name="#">Anchor</a>}}}
+               {<a name="#">Anchor</a>}}}
 	} ...
-

Warning

You must not give your your form the same name that your page has. Otherwise HTMLArea won't load.

Convert your textarea widget to a richtext widget and enable htmlarea.

The <code>htmlarea_p</code>-flag can be used to prevent +

Warning

You must not give your your form the same name that your page has. Otherwise HTMLArea won't load.

Convert your textarea widget to a richtext widget and enable htmlarea.

The htmlarea_p-flag can be used to prevent WYSIWYG functionality. Defaults to true if left away.

From:

 	{my_input_field_2:text

To:

 	{my_input_field_2:richtext(richtext)
-			{htmlarea_p "t"}
+			{htmlarea_p "t"}

The richtext widget presents a list with two elements: text and content type. - To learn more on existing content types search in Google for "MIME-TYPES" or - take a look at the <code>cr_mime_types</code> table.

Make sure that both values are passed as a list to your - <code>ad_form</code> or you will have problems + To learn more on existing content types search in Google for "MIME-TYPES" or + take a look at the cr_mime_types table.

Make sure that both values are passed as a list to your + ad_form or you will have problems displaying the content or handling the data manipulation correctly.

Depending on the data model of your package you either support a content format - or don't. If you don't you can assume <code>"text/html"</code> or - <code>"text/richtext"</code> or <code>"text/enhanced"</code>.

The relevant parts in your <code>ad_form</code> definition are the - switches <code>-new_data</code>, <code>-edit_data</code>, - <code>-on_request</code> and <code>-on_submit</code>.

To allow your data to display correctly you need to add an <code>-on_request</code> block. - If you have the format stored in the database pass this as well else use <code>"text/html"</code>:

-	set my_input_field_2 [template::util::richtext::create $my_input_field_2 "text/html"]
+	or don't. If you don't you can assume "text/html" or 
+	"text/richtext" or "text/enhanced".
The relevant parts in your ad_form definition are the 
+	switches -new_data, -edit_data, 
+	-on_request and -on_submit.
To allow your data to display correctly you need to add an -on_request block. 
+	If you have the format stored in the database pass this as well else use "text/html":
+	set my_input_field_2 [template::util::richtext::create $my_input_field_2 "text/html"]
 	
Now make sure that your SQL queries that do the data manipulation retrieve the correct value. 
-	If you simply use <code>my_input_field_2</code> you will store a list. 
-	Thus you need to add an <code>-on_submit</code> block:
+	If you simply use my_input_field_2 you will store a list. 
+	Thus you need to add an -on_submit block:
 	set my_input_field_2 [ template::util::richtext::get_property contents $my_input_field_2]
 	set format [ template::util::richtext::get_property format $my_input_field_2] #This is optional
-	
Now the correct values for <code>my_input_field_2</code> and 
-	<code>format</code> are passed to the <code>-new_data</code> and 
-	<code>-edit_data</code> blocks which don't need to get touched.
To make HTMLArea optional per package instance define a string parameter 
-	<code>UseWysiwygP</code> which defaults <code>0</code> for your 
+	
Now the correct values for my_input_field_2 and 
+	format are passed to the -new_data and 
+	-edit_data blocks which don't need to get touched.
To make HTMLArea optional per package instance define a string parameter 
+	UseWysiwygP which defaults 0 for your 
 	package using the APM.
In your edit page make the following changes
 	# Is WYSIWYG enabled?
-	set use_wysiwyg_p [parameter::get -parameter "UseWysiwygP" -default "f"]
+	set use_wysiwyg_p [parameter::get -parameter "UseWysiwygP" -default "f"]
 	
 	...
 	
 	{htmlarea_p $use_wysiwyg_p}
-	
The <code>-on_request</code> switch should set this value for your form.
+	
The -on_request switch should set this value for your form.
 	set htmlarea_p $use_wysiwyg_p
 	
All you need now is a configuration page where the user can change this setting. Create a 
-	<code>configure.tcl</code> file:
+	configure.tcl file:
 	ad_page_contract {
 
     	This page allows a faq admin to change the UseWysiwygP setting
 
 	} {
-    	{return_url ""}
+    	{return_url ""}
 	}
 
-	set title "Should we support WYSIWYG?"
+	set title "Should we support WYSIWYG?"
 	set context [list $title]
 
 	set use_wysiwyg_p
 
 	ad_form -name categories_mode -form {
     	{enabled_p:text(radio)
-        	{label "Enable WYSIWYG"}
+        	{label "Enable WYSIWYG"}
         	{options {{Yes t} {No f}}}
         	{value $use_wysiwyg_p}
     	}
     	{return_url:text(hidden) {value $return_url}}
-    	{submit:text(submit) {label "Change"}}
+    	{submit:text(submit) {label "Change"}}
 	} -on_submit {
-    	parameter::set_value  -parameter "UseWysiwygP" -value $enabled_p
+    	parameter::set_value  -parameter "UseWysiwygP" -value $enabled_p
     	if {![empty_string_p $return_url]} {
         	ns_returnredirect $return_url
     	}
 	}
 	
In the corresponding ADP file write
 	<master>
-	<property name="title">@title@</property>
-	<property name="context">@context@</property>
+	<property name="title">@title@</property>
+	<property name="context">@context@</property>
 
-	<formtemplate id="categories_mode"></formtemplate>
+	<formtemplate id="categories_mode"></formtemplate>
 	
And finally reference this page from your admin page
 	#TCL:
 	set return_url [ad_conn url]