<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Enabling WYSIWYG</title><meta name="generator" content="DocBook XSL Stylesheets V1.60.1"><link rel="home" href="index.html" title="OpenACS Core Documentation"><link rel="up" href="tutorial-advanced.html" title="Chapter�10.�Advanced Topics"><link rel="previous" href="tutorial-schedule-procs.html" title="Scheduled Procedures"><link rel="next" href="tutorial-parameters.html" title="Adding in parameters for your package"><link rel="stylesheet" href="openacs.css" type="text/css"></head><body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF"><div class="navheader"><a href="http://openacs.org"><img src="/doc/images/alex.jpg" border="0" alt="Alex logo"></a><table width="100%" summary="Navigation header" border="0"><tr><td width="20%" align="left"><a accesskey="p" href="tutorial-schedule-procs.html">Prev</a> </td><th width="60%" align="center">Chapter�10.�Advanced Topics</th><td width="20%" align="right"> <a accesskey="n" href="tutorial-parameters.html">Next</a></td></tr></table><hr></div><div class="sect1" lang="en"><div class="titlepage"><div><div><h2 class="title" style="clear: both"><a name="tutorial-wysiwyg-editor"></a>Enabling WYSIWYG</h2></div></div><div></div></div><div class="authorblurb"><p>by <a href="mailto:nima.mazloumi@gmx.de" target="_top">Nima Mazloumi</a></p>
          OpenACS docs are written by the named authors, and may be edited
          by OpenACS documentation staff.
        </div><p>Most of the forms in OpenACS are created using the form builder, see <a href="form-builder.html" title="Using Form Builder: building html forms dynamically">Section�, &#8220;Using Form Builder: building html forms dynamically&#8221;</a>. For detailed information on the 
    API take a look <a href="/api-doc/proc-view?proc=ad_form" target="_top">here</a>.</p><p>The following section shows how you can modify your form to allow WYSIWYG functionalities.</p><p>Convert your page to use <font color="red">&lt;code&gt;ad_form&lt;/code&gt;</font> (some changes but worth it)</p><p>Here an examples. From:</p><pre class="programlisting">
	template::form create my_form
	template::element create my_form my_form_id -label &quot;The ID&quot; -datatype integer -widget hidden
	template::element create my_form my_input_field_1 -html { size 30 } -label &quot;Label 1&quot; -datatype text -optional
	template::element create my_form my_input_field_2 -label &quot;Label 2&quot; -datatype text -help_text &quot;Some Help&quot; -after_html {&lt;a name=&quot;#&quot;&gt;Anchor&lt;/a&gt;}
	</pre><p>To:</p><pre class="programlisting">
	ad_form -name my_form -form {
		my_form_id:key(acs_object_id_seq)
 		{my_input_field_1:text,optional
               {label &quot;Label 1&quot;}
               {html {size 30}}}
      	{my_input_field_2:text
               {label &quot;Label 2&quot;}
               {help_text &quot;Some Help&quot;}
	       	   {after_html
               {&lt;a name=&quot;#&quot;&gt;Anchor&lt;/a&gt;}}}
	} ...
	</pre><div class="warning" style="margin-left: 0.5in; margin-right: 0.5in;"><h3 class="title">Warning</h3><p>You must not give your your form the same name that your page has. Otherwise HTMLArea won't load.</p></div><p>Convert your textarea widget to a richtext widget and enable htmlarea.</p><p>The <font color="red">&lt;code&gt;htmlarea_p&lt;/code&gt;</font>-flag can be used to prevent 
	WYSIWYG functionality. Defaults to true if left away.</p><p>From:</p><pre class="programlisting">
	{my_input_field_2:text
	</pre><p>To:</p><pre class="programlisting">
	{my_input_field_2:richtext(richtext)
			{htmlarea_p &quot;t&quot;}
	</pre><p>The richtext widget presents a list with two elements: text and content type.
	To learn more on existing content types search in Google for &quot;MIME-TYPES&quot; or 
	take a look at the <font color="red">&lt;code&gt;cr_mime_types&lt;/code&gt;</font> table.</p><p>Make sure that both values are passed as a list to your 
	<font color="red">&lt;code&gt;ad_form&lt;/code&gt;</font> or you will have problems 
	displaying the content or handling the data manipulation correctly.</p><p>Depending on the data model of your package you either support a content format 
	or don't. If you don't you can assume <font color="red">&lt;code&gt;&quot;text/html&quot;&lt;/code&gt;</font> or 
	<font color="red">&lt;code&gt;&quot;text/richtext&quot;&lt;/code&gt;</font> or <font color="red">&lt;code&gt;&quot;text/enhanced&quot;&lt;/code&gt;</font>.</p><p>The relevant parts in your <font color="red">&lt;code&gt;ad_form&lt;/code&gt;</font> definition are the 
	switches <font color="red">&lt;code&gt;-new_data&lt;/code&gt;</font>, <font color="red">&lt;code&gt;-edit_data&lt;/code&gt;</font>, 
	<font color="red">&lt;code&gt;-on_request&lt;/code&gt;</font> and <font color="red">&lt;code&gt;-on_submit&lt;/code&gt;</font>.</p><p>To allow your data to display correctly you need to add an <font color="red">&lt;code&gt;-on_request&lt;/code&gt;</font> block. 
	If you have the format stored in the database pass this as well else use <font color="red">&lt;code&gt;&quot;text/html&quot;&lt;/code&gt;</font>:</p><pre class="programlisting">
	set my_input_field_2 [template::util::richtext::create $my_input_field_2 &quot;text/html&quot;]
	</pre><p>Now make sure that your SQL queries that do the data manipulation retrieve the correct value. 
	If you simply use <font color="red">&lt;code&gt;my_input_field_2&lt;/code&gt;</font> you will store a list. 
	Thus you need to add an <font color="red">&lt;code&gt;-on_submit&lt;/code&gt;</font> block:</p><pre class="programlisting">
	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
	</pre><p>Now the correct values for <font color="red">&lt;code&gt;my_input_field_2&lt;/code&gt;</font> and 
	<font color="red">&lt;code&gt;format&lt;/code&gt;</font> are passed to the <font color="red">&lt;code&gt;-new_data&lt;/code&gt;</font> and 
	<font color="red">&lt;code&gt;-edit_data&lt;/code&gt;</font> blocks which don't need to get touched.</p><p>To make HTMLArea optional per package instance define a string parameter 
	<font color="red">&lt;code&gt;UseWysiwygP&lt;/code&gt;</font> which defaults <font color="red">&lt;code&gt;0&lt;/code&gt;</font> for your 
	package using the APM.</p><p>In your edit page make the following changes</p><pre class="programlisting">
	# Is WYSIWYG enabled?
	set use_wysiwyg_p [parameter::get -parameter &quot;UseWysiwygP&quot; -default &quot;f&quot;]
	
	...
	
	{htmlarea_p $use_wysiwyg_p}
	</pre><p>The <font color="red">&lt;code&gt;-on_request&lt;/code&gt;</font> switch should set this value for your form.</p><pre class="programlisting">
	set htmlarea_p $use_wysiwyg_p
	</pre><p>All you need now is a configuration page where the user can change this setting. Create a 
	<font color="red">&lt;code&gt;configure.tcl&lt;/code&gt;</font> file:</p><pre class="programlisting">
	ad_page_contract {

    	This page allows a faq admin to change the UseWysiwygP setting

	} {
    	{return_url &quot;&quot;}
	}

	set title &quot;Should we support WYSIWYG?&quot;
	set context [list $title]

	set use_wysiwyg_p

	ad_form -name categories_mode -form {
    	{enabled_p:text(radio)
        	{label &quot;Enable WYSIWYG&quot;}
        	{options {{Yes t} {No f}}}
        	{value $use_wysiwyg_p}
    	}
    	{return_url:text(hidden) {value $return_url}}
    	{submit:text(submit) {label &quot;Change&quot;}}
	} -on_submit {
    	parameter::set_value  -parameter &quot;UseWysiwygP&quot; -value $enabled_p
    	if {![empty_string_p $return_url]} {
        	ns_returnredirect $return_url
    	}
	}
	</pre><p>In the corresponding ADP file write</p><pre class="programlisting">
	&lt;master&gt;
	&lt;property name=&quot;title&quot;&gt;@title@&lt;/property&gt;
	&lt;property name=&quot;context&quot;&gt;@context@&lt;/property&gt;

	&lt;formtemplate id=&quot;categories_mode&quot;&gt;&lt;/formtemplate&gt;
	</pre><p>And finally reference this page from your admin page</p><pre class="programlisting">
	#TCL:
	set return_url [ad_conn url]

	#ADP:
	&lt;a href=configure?&lt;%=[export_url_vars return_url]%&gt;&gt;Configure&lt;/a&gt;
	</pre></div><div class="navfooter"><hr><table width="100%" summary="Navigation footer"><tr><td width="40%" align="left"><a accesskey="p" href="tutorial-schedule-procs.html">Prev</a> </td><td width="20%" align="center"><a accesskey="h" href="index.html">Home</a></td><td width="40%" align="right"> <a accesskey="n" href="tutorial-parameters.html">Next</a></td></tr><tr><td width="40%" align="left">Scheduled Procedures </td><td width="20%" align="center"><a accesskey="u" href="tutorial-advanced.html">Up</a></td><td width="40%" align="right"> Adding in parameters for your package</td></tr></table><hr><address><a href="mailto:docs@openacs.org">docs@openacs.org</a></address></div><a name="comments"></a><center><a href="http://openacs.org/doc/current/tutorial-wysiwyg-editor.html#comments">View comments on this page at openacs.org</a></center></body></html>