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

  1. Configuration
  2. Step 2: Create your widget
  3. Step 3: Enjoy!
  4. Options
  5. Roadmap

This tutorial will show you how to use the Pogostick Yii Extension Library 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.

I assume you have installed the Pogostick Yii Extension Library. If you haven't please do so before you run the code below. It won't work otherwise.


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:

<textarea id='myTextArea' class='html' rows='10' cols='50'></textarea>

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.

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

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!


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


The skin to use for displaying the markItUp editor. You can download skins from the markItUp web site. I have included the markItUp and simple skins with the default installation. Just place your downloaded skins in the /external/jquery-plugins/markitup/skins directory under where you installed the psYiiExtensions.


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


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 settings 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.


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.


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.

3 0
Viewed: 36 898 times
Version: 1.1
Category: Tutorials
Written by: lucifurious
Last updated by: wei
Created on: Jun 12, 2009
Last updated: 13 years ago
Update Article


View all history

Related Articles