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

You are viewing revision #2 of this wiki article.
This version may not be up to date with the latest version.
You may want to view the differences to the latest version.

next (#3) »

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.

Configuration

  1. skinToUse
  2. multiUseClass
  3. settingsToUse
  4. setToUse

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

  1. skinToUse
  2. multiUseClass
  3. settingsToUse
  4. setToUse

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

  1. skinToUse
  2. multiUseClass
  3. settingsToUse
  4. setToUse

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!

  1. skinToUse
  2. multiUseClass
  3. settingsToUse
  4. setToUse

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

  1. skinToUse
  2. multiUseClass
  3. settingsToUse
  4. setToUse

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

multiUseClass

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?

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

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

  1. skinToUse
  2. multiUseClass
  3. settingsToUse
  4. setToUse

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
3 followers
Viewed: 26 998 times
Version: Unknown (update)
Category: Tutorials
Written by: lucifurious
Last updated by: wei
Created on: Jun 12, 2009
Last updated: 7 years ago
Update Article

Revisions

View all history

Related Articles