Markitup

Create a "Markitup" custom field type in the ExpressionEngine Control Panel

Download Markitup 1.0.0 (17kb zip)

This version posted June 16, 2008

Overview

Markitup Field Type In EE

Add a “Markitup” custom field type so you can make use of some of the great features of Markitup. The only things required for this to work are:

  • The extension and language file
  • The jQuery JavaScript library. (You can set the path for jQuery in the settings (see below))
  • Markitup sets that you want to utilize
  • If using Textile, the “fixed” version of the Textile plugin that repairs a known bug with lists in Textile (included in the download – this is important, you HAVE to use the included version of the Textile plugin for your Textile lists to work correctly)

Right now, due to a small issue with having to hard-code a few things in the file (which you’re more than welcome to go in and tweak if you need something other that Textile or Markdown), it’s set out of the box for Textile and Markdown, in addition to XHTML or None (by default). Previews don’t work (or they work as well as any preview in the CP in EE, which is to say, not well). I would suggest disabling the preview button on the Markitup fields.

Basic Steps for Installing and Using Markitup

  1. Put a jQuery file somewhere on your site.
  2. Download Markitup (and the Textile and/or Markdown sets).
  3. Put the Markitup folder, containing your sets, in your Extensions folder.
  4. Install the appropriate plugins (the Textile plugin included with this download, or the Markdown plugin) in your Plugins folder. These will be used when you select the text formatting for the field.
  5. (This is one of the manual parts that sucks that I still need to work out): If you want to have an entry that uses more than one type of Markitup field on a page, we need to reference the Settings for each in different ways. The default setting is “mySettings”. You will find this on the first line of “set.js” inside each Markitup set. You can leave the Default set alone, but for Textile and Markdown, you will have to suffix the first line of each “set.js” file with either “_textile” or “_markdown”, respectively. For example, if you install the Textile set, open /system/extensions/markitup/sets/textile/set.js (see the picture below) and change “mySettings” on the first line to “mySettings_textile”. Ahh, that’s better.
  6. Install and enable the Markitup Extension (don’t forget the language file). Markitup will automatically read your sets directory to know what sets you have installed, and put the appropriate JS and CSS in the header in the Control Panel. Don’t forget the settings (see below for more detail).
  7. Create a custom field and give it the Markitup field type.
  8. Select the Text formatting as you would for any other EE field type (Add it if it isn’t already there by using the “Edit List” link)
  9. Go to Publish or Edit an entry that contains your field type and you should see that the field has magically changed into a quick-loading Markitup field that plays nice with other Extensions, and uses the formatting you have selected.
  10. Add to or extend your sets in any of the ways documented on the Markitup site (for example, I add a handy Lorem Ipsum button to my Textile set) – there are many Add-Ons to choose from.
Markitup Setup

Markitup Custom Fields and You

Markitup Fields

This is a sample weblog entry with three Markitup fields set to different types. Note the different, customizable buttons on each bar.

Right now, “disabling” the fields only temporarily turns off the Markitup field, leaving you with a bare textarea. I’m not sure what that is for (to better see what you’re doing?) but I thought I should include the functionality. One setting that does not appear on fields at all (at least currently) is the ability to switch field type right in the entry. You would have to go back to the settings for the field and change it to “Textarea” to get all the native EE functionality back.

I’d love to be able to figure all the outstanding issues out – but instead of waiting for perfection, I thought I’d release this as it stands right now, because it’s better than nothing! Maybe it will come in handy for you.


Settings

Markitup Settings

There are four settings.
Path to your jQuery file – just point this to an existing jQuery file.
Name of your Markitup JS file – Markitup comes with two jQuery versions in the download. Just specify which one you want to load (packed or not).
Check for updates? – Setting to yes will check Masuga Design for updates to this extension, and alert you on the CP homepage if there is a newer version
Cache refresh (in minutes) – How often to check for an update


Further Development

Please use this at your own risk. I’m not responsible for data loss, hosing your site, or irreparably damaging your reputation. I started development of this because I was looking for something to help replace Textile Editor Helper – because that doesn’t play nice with the “Playa” extension, which I use all the time.

There are some things this lacks, I’m sure. Some are Markitup’s fault (particularly with creating multiple-line Textile lists), and some are probably a limitation of my jQuery-ness. I am open to suggestions, help, snippets of code that will help make it better, and a donation if you’re so inclined. You can leave comments here or in the forum thread (see below). I am in no way affiliated with Markitup and I’m not distributing it either: I just think it’s really cool, and you have to go download it yourself.

EE Forum Thread

You’re welcome to leave comments here, but I’ll bet most of the action is on the EE Forums. The related EE Forum thread for Markitup is here.

This entry was last updated June 22, 2008.

No comments.

Leave a Reply

If you're entering a block of code, you can wrap it with [code][/code] for proper formatting.

Ryan's first name is? 4 character(s)