A markItUp field type for the Field Frame ExpressionEngine extension
JavaScript PHP
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


ks markitup


The ks.markitup field type requires the FieldFrame extension by Brandon Kelly.

Install ks.markitup

  1. download and unzip the package
  2. place the contents of the package in your site’s system, or equivalent, directory. Or, find the ks_markitup folder within extensions/fieldtypes/ and place it in your site’s system/extensions/fieldtypes directory.
  3. Enable the field type in the EE Control Panel by going to Admin > Utilities > Fieldtypes Manager and choosing the “Yes” radio button for KS Markitup
  4. Optional: set options for the default MarkItUp Set and MarkItUp Skin in the Fieldtypes Manager. If you do not set them, the MarkItUp Set will be “default” and the MarkItup Skin will be “simple.”
  5. Set a field to use the KS Markitup fieldtype by going to Admin > Channel Administration > Field Groups > Custom Fields, choosing a field, and then selecting KS Markitup from the Field Type drop-down list.

Configure ks.markitup

To change the appearance of buttons in a markup set, use the set’s style.css file.
To add buttons or change the behavior of existing buttons, see the official markItUp documentation

Install Extra Markup Sets

MarkItUp has additional markup sets, such as Textile or Markdown, that you can use instead of (or in addition to) the included default or html set.

  1. Go to http://markitup.jaysalvat.com/downloads/ and choose a markup set
  2. Download the zip file
  3. Unzip it in your markItUp sets folder
  4. Create an init.js file in your set’s directory.
  5. Add this short script to the init.js file:
    $(document).ready(function() {
  6. In the above script, change default in ‘.ksmarkitup-default’ to the name of your set’s directory.

Use more than one set on a page

If you wish to use more than one markup set on an entry edit/publish page, you’ll have to do some additional configuration:

  1. Set a nameSpace for the new set in the set.js file (see the default set.js for an example). The nameSpace adds a class to a container div, so you can specify button styles.
  2. Add your nameSpace class at the beginning of each line in the style.css file (see the default style.css for an example).
  3. In the set.js file, where it says mySettings = {, change “mySettings” to a unique name.
  4. In the set’s init.js file (described above) change “mySettings” to the unique name you gave to the settings object in your set.js file:
    $(document).ready(function() {