How to use markItUp! on a text field for full WYSIWYG editing

Tutorials

wysiwyg, Authentication, markdown

This tutorial will show you how to use the [Pogostick Yii Extension Library](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 Yii Extension 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;~~~
 
[html]
 
<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>
 
 
```php 
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.