Difference between #3 and #2 of How to use markItUp! on a text field for full WYSIWYG editing

unchanged
Title
How to use markItUp! on a text field for full WYSIWYG editing
unchanged
Category
Tutorials
unchanged
Tags
changed
Content
This tutorial will show you how to use the
Pogostick[Pogostick Yii Extension
LibraryLibrary](http://www.yiiframework.com/extension/ps-yii-extensions/)
to make an HTML TEXTAREA input element into a full-fledged WYSIWYG editor pretty
much with very little code.

This is done using a wrapper for the very excellent [markItUp! jQuery
widget](http://markitup.jaysalvat.com/home/).

I assume you have installed the Pogostick[Pogostick Yii
Extension
Library.Library](http://www.yiiframework.com/extension/ps-yii-extensions/).
If you haven't please do so before you run the code below. It won't work
otherwise.

# Configuration #
There is no configuration necessary after you have installed the psYiiExtensions
library and set your path alias in your main.php configuration file.

# Step 1: Create a TEXTAREA #
You must create a TEXTAREA somewhere in your HTML to use the markItUp! widget.
Give your TEXTAREA a unique id:

<code>
        &lt;textarea id='myTextArea' class='html' rows='10'
cols='50'&gt;&lt;/textarea&gt;
</code>

# Step 2: Create your widget #
Now that your form contains a TEXTAREA with a unique id ('myTextArea'), we can
create our widget. This can be placed anywhere within your view, but put it at
the top somewhere for easy maintenance.

<code>
	CPSMarkItUpWidget::create( array( 'id' => 'myTextArea' ) );
</code>

# Step 3: Enjoy! #
That's all there is to it! When you refresh your page, you should see a full
WYSIWYG text editor where your TEXTAREA was! 

# Options #
Aside from the 'id' and 'name' parameters (which are in the core CWidget class,
there are a four additional options for this widget.

## skinToUse ##
The skin to use for displaying the markItUp editor. You can download skins from
the [markItUp web site](http://markitup.jaysalvat.com/downloads/). I have
included the <b>markItUp</b> and <b>simple</b> skins
with the default installation. Just place your downloaded skins in the
/external/jquery-plugins/markitup/skins directory under where you installed the
psYiiExtensions.

## multiUseClass ##
If this option is set with a valid CSS class name, <b>all</b>
TEXTAREAs on your page that have this CSS class applied to them will be
converted into markItUp areas. Pretty neat eh?

## settingsToUse ##
The NAME of the JSON settings array included with the "set". Defaults
to 'mySettings'. markItUp is quite configurable and can be used to edit a
variety of markup languages. To tell it how to parse and display, a
<b>settings</b> file is used. In this file is a JSON array (which is
named) of configuration options. The default name for the array variable is
'mySettings'. You can download additional settings files from the markItUp web
site.

## setToUse ##
The parse set to use. Defaults to 'html'. Again, markItUp is quite flexible and
can parse a variety of formats. You can download additional parse-sets files
from the markItUp web site.

# Roadmap #
I'm not planning on doing to much with this unless the options change or
something breaks. However, I am waiting for the author to update the widget to
use the jQuery UI themes. I will update this page once that occurs.