Overview

Add an MD Markitup (MDMIU) custom field type so you can make use of some of the great features of Markitup! by adding custom buttons to your textareas in the ExpressionEngine control panel.

Set the default height and default text formatting of your field right on the custom field screen, just as you would with a default EE textarea.

Requirements

The scripts and files required for MDMIU to work are:

• The extension and language files (Included)
• The jQuery JavaScript library. (Separate download)
• The Markitup! script. (Separate download)
• The sets that you want to utilize (default, Textile, Markdown), and the basic EE skin (Included)
• If using Textile or Markdown, make sure you have the correct EE plugins installed. (Separate downloads)

Using Textile and Markdown in ExpressionEngine

In order to use either Textile or Markdown with MD Markitup, you first have to have those plugins installed. Grab the Textile plugin and the Markdown plugins and drop either or both of those in your system/plugins/ folder.

After installing the plugins, you will need to enable the plugins for each custom field for which you want them to appear. This is an easy, yet somewhat tedious process. Here is the process, assuming just the Textile plugin for now:

1. Install the Textile plugin into your system/plugins/ folder
2. Create and Submit a new custom field. It doesn’t matter if it is MDMIU or a textarea off the bat. When you create a field, the only options available under “Default Text Formatting for This Field” are None, Auto <br />, and XHTML.
3. Back at the Custom Fields screen, click on your new field to go back in and edit it.
4. You will now notice an “Edit List” link to the right of the Default Text Formatting dropdown. Click this, and click OK at the prompt (as long as you haven’t made other changes, because they will be lost).
5. You will now see a list of all your plugins. Select “Yes” next to Textile and click “Update”.
6. You will now be able to select Textile from the Text Formatting dropdown. When you do, you will see a red warning message appear above the field’s Update button.
7. If you have previous entries you would like to apply your new formatting to, check the “Update all existing weblog entries” box. If not, skip the box and just click “Update”.
8. You now have a field whose default text formatting is set to textile. When you are on a Publish or Edit page, you will be able to see Textile (as well as all the default formatting settings) in the Field Formatting dropdowns below your custom fields.

Pretty tedious, right? If you’re not averse to some basic EE core hackery, there is an article at devot:ee explaining a small hack you can do to your EE install so that (as long as you have the plugin(s) installed), you don’t have to add them manually to every field’s text formatting list. You can read the article at devot-ee.com.

Features

Markitup helps make the textareas in your ExpressionEngine control panel much more powerful and flexible.

1. Per-field buttons: Control what buttons show on what fields to help guide the user to what can and can’t be done in a field.
2. Advanced Functionality: Mark something as ‘Bold’, drop in whole chunks of HTML, make a TinyUrl with AJAX, or use Markitup! callback functions (or plugins) to do other advanced things. Create your own buttons that can do almost anything you can think of using the power of Markitup!.
3. Resize handle: Ability to easily increase the height of the viewing area while editing
4. Spellchecking: Most all the features of the regular EE textareas are available
5. Field Formatting: Change the field formatting from the default setting on a per-entry basis on your MDMIU fields.

Also:

• Nested Buttons: Nest buttons to group similar functions (such as 5 different ways to insert an image, for example), and leave more room for other buttons or a clean look above your textareas
• Moxiecode: Tie an MD Markitup field to Moxiecode’s Image and File managers for very robust image and file placement

Markitup is not a WYSIWTF WYSIWYG editor, but works much like the native EE textareas do, showing the markup itself.

Download and Installation

The following section outlines MD Markitup usage from download through configuration.

Download

After purchasing and downloading the latest version of the MDMIU package and extracting the zip file, you will have the following files:

• extensions/
  • ext.md_markitup.php
• language/
  • lang.md_markitup.php
• tools/
  • markitup/
    • sets/
      • _shared_images/
        • (30 icon files)
      • default/
        • set.js
        • style.css
      • markdown/
        • set_markdown.js
        • style_markdown.css
      • textile/
        • set_textile.js
        • style_textile.css
    • skins/
      • simple_ee/
        • images/
          • (3 image files)
        • simple_ee.css
• README_changelog.txt

Installation

Installation is relatively straightforward. The default installation setup is shown above.

1. Copy /extensions/ext.md_markitup.php file to your /extensions/ directory in the system folder
2. Copy /language/english/lang.md_markitup.php file to your /languages/english/ directory (also in system folder)
3. Place /tools/ at the root of your site. This is the default, and it’s useful to place it there in case you’d like to use Markitup on the front end of your site as well, eg. for comments. You can change the location of this folder (or omit it altogether) – just make sure to update the path to your Markitup scripts in the extension settings
4. Download Markitup! and place the script file in the markitup folder.
5. Open the Extension Manager (Admin → Utilities → Extensions Manager)
6. Enable Extensions if not already enabled (the global setting)
7. Enable MD Markitup
8. Click “Settings” to modify the settings (see below)

You do not need to place your markitup in a ‘tools’ folder – but this becomes very handy later on if you decide to work with Moxicode Image and File managers. You can put the support scripts for those into the ‘tools’ folder as well. More info on Moxiecode below.

Settings: Configure MD Markitup

These instructions are being fleshed out as I have time. If you have specific questions, please email me.

Extension Access

Enable MD Markitup for this site?

Yes/No

MD Markitup is MSM aware (EE’s Multiple Site Manager). Set whether MD Markitup can be used on the current site.

Scripts

jQuery Core v1.2.6

http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js

By default, this is pointed to the Google AJAX Libraries API version of jQuery. If you are using ExpressionEngine 1.6.5+ this setting will be ignored if you have activated the CP jQuery extension – which would already load jQuery for use in the control panel.

Markitup JS

http://www.yoursite.com/tools/markitup/jquery.markitup.pack.js

You must download and install the Markitup! script separately. Because a skin and sets are included in the MDMIU download, you only need to worry about the Markitup! script itself. Set the path to the script here. It will default to the ‘tools’ path you see above, taking the domain from the URL to the root directory of your site setting under Admin → System Preferences → General Configuration.

Markitup Skin

Path to the Skin Directory

http://www.yoursite.com/tools/markitup/skins/simple_ee/

The Simple EE skin is a modified version of the default Markitup! Simple skin, modified to better fit with the EE control panel. There are certain CSS settings included in the simple_ee skin that ensure the Publish menu flyout menu stays above any MDMIU toolbars, among other things. If you prefer to use your own skin, just direct the extension to it here.

Name of the skin’s CSS File

simple_ee.css

This is here to allow you some flexibility with what you name the CSS file for your skin, in case you don’t like the “style.css” name that is the usual name in Markitup! skins.

Markitup Sets

There are three sets included with MD Markitup.

Default Set

The Default set will be used for fields whose formatting is set to “None”, “XHTML”, and Auto <br />. The Default set is always enabled.

Path to Default Set

http://www.yoursite.com/tools/markitup/sets/default/

Name of Default CSS File

style.css

Name of Default JS File

style.js

Textile Set

This is only enabled for fields whose formatting is set to “Textile”.

Enable Markitup Textile?

Yes/No

Textile is enabled by default. Setting this to “No” will remove the lines from the control panel header that include the Textile set and CSS file.

Path to Textile Set

http://www.yoursite.com/tools/markitup/sets/textile/

Name of Textile CSS File

style_textile.css

This allows you the flexibility to rename this file, which is named “style_textile.css” by default.

Name of Textile JS File

set_textile.js

This allows you the flexibility to rename this file, which is named “set_textile.js” by default.

Show documentation link for Textile Set?

Yes/No

This will show or hide a visible link to Textile documentation.

URL for Textile styling documentation

http://thresholdstate.com/articles/4312/the-textile-reference-manual

If there is certain documentation you would rather point to, change the URL here.

Markdown Set

This is only enabled for fields whose formatting is set to “Markdown”.

Enable Markitup Markdown?

Yes/No

Markdown is turned off by default. Setting this to “Yes” will put the proper lines in the control panel header to include the Markdown set and CSS file.

Path to Markdown Set

http://www.yoursite.com/tools/markitup/sets/markdown/

Name of Markdown CSS File

style_markdown.css

This allows you the flexibility to rename this file, which is named “style_markdown.css” by default.

Name of Markdown JS File

set_markdown.js

This allows you the flexibility to rename this file, which is named “set_markdown.js” by default.

Show documentation link for Markdown Set?

Yes/No

This will show or hide a visible link to Markdown documentation.

URL for Markdown styling documentation

http://daringfireball.net/projects/markdown/basics

If there is certain documentation you would rather point to, change the URL here.

Misc Settings

Enable Spellchecking?

Yes/No

This will show or hide the “Check Spelling” link that shows below the MDMIU field, next to the field formatting. If you have elected to hide field formatting on a field, the “Check Spelling” link will still show if you have this setting set to “Yes”.

Check for Updates

Would you like this extension to check for updates and display them on your CP homepage?

Yes/No

MD Markitup can call home (http://masugadesign.com) and check for recent updates. For this to work, you need to install the LG Addon Updater Extension.

MD Markitup Usage

General

MDMIU fields work just like default EE textareas, except that the MIU buttons are appended to the top of the textarea and a resize handle appears at the bottom (the resize handle does not appear in Safari). Usage is as simple as setting a custom field to be an MD Markitup field.

The included sets include some basic buttons, as well as a sample nested button. You may wish to remove or hide (there are two different things) some of these buttons.

A quick Note About Multi-Line List Creation and Markitup!
Contrary to what has been mentioned in the EE forums regarding Markitup! and its failure to support multi-line list creation, you can make multiple lines into list items all at once. Select all the lines, hold Control-Shift, and click either the Ordered or Unordered list buttons. All of your line items will become list items. This is also documented on the Markitup! Documentation page, under “Keys”.

Hide and Seek with CSS

It’s easy to apply only certain buttons to certain fields. See the included CSS files in the sets for examples. Full instructions are coming soon.

Advanced CSS Tricks

You can also change things such as the font family, font size, background, and more on a per-field basis. It’s just a matter of further modifying the CSS file for your set.

Better and more complete instructions coming soon – I’m working on this documentation as I have time.

Utilizing Moxiecode’s Image and File Managers

MD Markitup works well with both Moxiecode’s Image Manager and File Manager scripts. There is some information in this post from the MD Markitup thread in the ExpressionEngine forums on making some buttons that work with the JS functions that tie MD Markitup to Moxiecode.

More detailed instructions coming soon.

Troubleshooting and Support

No one likes it when something doesn’t work out of the box. I’ll be happy to help you get MD Markitup working for you on your site. The best way to get help is to support@masugadesign.com. You may want to look over the following questions first – or better yet, copy them into your email and answer them for me. That will give me the best head start to help you out. Not all of these may apply to you, but they are a collection of my most common questions to people looking for help:

1. What version and build of EE are you using?
2. Is this an MSM site, or a single site?
3. What other extensions do you have installed?
4. You have created a custom field, and selected MD Markitup as the field type?
5. You have downloaded and installed the actual Markitup script from Jay Salvat’s site?
6. Per the default install, you have a tools folder at the root of your site, with a markitup folder in it, which includes Jay’s Markitup script? If you have deviated at all, can you explain where your files reside and what our setup is?
7. The path settings are correct for the extension if you have elected to put your Markitup script elsewhere?
8. If you’re interested in Textile or Markdown, you have downloaded those plugins and installed them?
9. Can you check to see (through Firebug or just viewing source) if jQuery is being loaded more than once on your edit tab?

Release Notes

Included in the download is a file called README_changelog.txt that contains all changes per release. They are also listed here for easy reference:

Version 1.6.1 (Feb 27, 2009)

• Fixed a jQuery conflict that arose when installed along with some other add-ons (particularly others that also use jQuery but may be in “noconflict” mode)
• Reformatted the README.
• Removed jQuery version number when checking or setting $SESS->cache[‘scripts’][‘jquery’] = TRUE

Version 1.6.0 (Dec 29, 2008)

• Removed “Remove Toolbar” link and text explaining field formatting
• Added “simple_ee” skin to the download and altered styles for it
• Updated set JavaScript files for default, Textile, and Markdown
• Some code cleanup in the extension file
• Added settings to allow custom filenames for each set.js file, and the main skin.css file
• Changed default CSS file names, and default CP skin to ‘simple_ee’

Version 1.5.8 (Nov 19, 2008)

• Added ‘textarea’ class to the markitup textareas
• Fixed names in text_formatting_buttons function
• Added “/tools/” to the default script paths
• Put the JS/CSS for the default set before Textile, Markdown lines
• General cleanup (deleting comments, changing some “\n”‘s to NL’s)

Version 1.5.7 (Nov 19, 2008)

• Fixed typo in JS
• Added htmlspecialcharacters to textarea
• Removed version number from language file
• Added the README_changelog.txt file

Version 1.5.6

• Spellchecking is independent of show formatting
• Unobtrusively open documentation links in new window

Version 1.5.5

• Disable quicksave if field formatting changes on any of the fields
• Made spellchecking optional

Version 1.5.4

• Ability to change formatting on field-by-field basis
• Added spellcheck

Version 1.5.3

• Added hidden field for explicitly setting field formatting (EE 1.6.5 issue)

Version 1.5.2

• Added settings for more flexibility on placement
• Added check for CP jQuery.

Version 1.5.1

• Fixed a conflict with other extensions calling jQuery (i.e. LG Live Look)

Version 1.5.0

• Added LG Addon Updater compatibility
• MSM aware
• Added namespaces for multiple different instances
• System folder path fix
• Added ‘skin’ setting and updated settings page

Version 1.1.0

• Changed name to MD Markitup

Version 1.0.0

• Initial release. Sort of Beta.

License

MD Markitup is a commercial script for use with the ExpressionEngine CMS and is subject to the Commercial License Agreement.

Copyrights and Credits

Markitup! was authored by Jay Salvat and is released under a MIT/GPL license.

Fam Fam Fam Silk Icons (some of which I’ve included as default images in the download package) were created by Mark James, a web developer from Birmingham, UK.

Moxicode Image Manager and File Manager are copyright Moxiecode Systems AB.

Thanks to Karl Swedberg of learningjquery.com for his help with some custom functions in the set.js files that help MD Markitup play nice with Moxiecode Image and File managers.

Thanks to Leevi Graham for creating the jQuery plugin for creating a Table of Contents, nsm-TOC (used on this page).

Miscellaneous

Further Development
There are some things this extension lacks, I’m sure. I am open to suggestions, help, snippets of code that will help make it better, and any awesome examples of how you got MD MIU to do excellent things in the ExpressionEngine Control Panel. You can leave comments here or in the forum thread (see below). Also feel free to email support@masugadesign.com with suggestions.

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

Anything Missing?
Is there something that wasn’t covered here, or wasn’t explained well enough? Have suggestions? Please support@masugadesign.com me and let me know what’s missing or what could be improved.

This extension requires FieldFrame.

If you’re going to use Moxiecode Image and/or File manager with MD Markitup you would probably do well to download this extension and enable it. This extensions restricts access to MCFileManager and MCImageManager and adds the Moxiecode scripts to EE Control Panel header on Publish and Edit pages so the Moxie window will launch from your Markitup field buttons.

This extension looks out for and plays nice with Leevi Graham’s LG Image Manager and LG File Manager extensions, which also load the Moxie scripts in the Control Panel header (so if you have an entry that has an LG File Manager field and also a field that uses MD Markitup, the scripts shouldn’t get loaded twice).

Damn – though I’ve been using this for weeks, I had no idea where this original code came from. Just found out that it’s Greg Wood’s work, from this EE forum post

I use Mark Huot’s Live Search extension on most of the sites I’ve built with EE, but I thought it could use a few updates, including the ability to show the date of the entry, the weblog, and the status. I’ve updated the extension with these extras (as settings) as well as a couple other settings. I initially intended to convert this to jQuery, but that proved to be a bit beyond my current coding skills – so this is still a self-contained file. Thanks to Mark Huot for giving me the OK to release this.

• MSM Aware
• Works with LG Addon Updater to let you know if the version you’re using is outdated

Basic Steps for Installing and Using MD Live Search

1. Download the script from GitHub
2. Put the ext.md_live_search.php file in your extensions folder
3. Put the lang.md_live_search.php file in your language/english folder
4. Enable the extension, and modify any of the settings you need

Status Coloring

In order to get proper coloring of the statuses in the results, the color for the custom status should be in full Hex format. For example, don’t use “orange” as a status color, use “FF9900”.

There is no related forum thread for this, as this is just a quick update to an oldie but a goodie that I wanted to do for myself. Use this at your own risk and all that.

Overview

Show character counts below textareas, text inputs, and MD Markitup fields in the CP. You can set character counts to “soft” (default) which is more of a suggestion, or “hard” which will limit the field to that many characters and no more. You can also customize the message underneath each field.

• MSM Aware
• Works with LG Addon Updater to let you know if the version you’re using is outdated

Basic Steps for Installing and Using MD Character Count

1. Put the ext.md_character_count.php file in your extensions folder
2. Put the lang.md_character_count.php file in your language/english folder
3. Put the jquery.charcounter.js file anywhere you like—you’ll reference it in the extension settings
4. Enable the extension, and modify any of the settings you need

Settings

There are a number of settings.
Extension Access – Enable access on a site-by site basis if using MSM (Multi-Site Manager)
Scripts – MD Character Count requires two scripts. They are jQuery Core v1.2.6+ and a modified version of the jQuery Charcounter Plugin (modified version is bundled with the extension). If you are using EE 1.6.5+, you can simply enable the CP jQuery extension that is included in the extensions folder.
Character Count Fields – This extension loops through all of the fields in your site and lists all the textareas, text inputs, and MD Markitup fields. There are three settings for each of your custom fields: Count, Count Type, and Count Format.

• Count – If field is left blank then no count will display or be imposed.
• Count Type – A “soft” count allows the user to type beyond the max set in “Count”. When the max is exceeded, the Count Format will change style (specified in the CSS) as a warning. A hard count will cap the text entry so that the Count cannot be exceeded. NOTE: Be careful assigning a field that already has data in it to a “hard” count, as you will lose the characters beyond the number in your Count field.
• Count Format – If nothing is entered, the format will default to: “%1/_count_ characters remaining” where “%1” is the number of typed characters, and count is the number entered in the Count field. You can enter anything here (note that count is not a real variable. If you need the max shown in the Count Format, you have to enter it manually). There are samples shown in the extension settings.

CSS – The default styles for the text that shows below your fields can be altered here.
Check for updates? – Works with LG Addon Updater. If you have LG Addon Updater installed, and this is set to “Yes”, you will be notified of new updates on the Control Panel homepage.

EE Forum Thread

There is a related EE Forum thread for MD Character Count here.

Overview

There wasn’t an easy way to show, or filter, your expired entries in EE until now. This extension allows you to easily see what entries are expired – or set to expire in the future. A brand new dropdown is inserted in the search area of the Edit page so you can also filter by entries that are expired. Very handy if you use EE’s built in entry expiration!

• MSM Aware
• Works with LG Addon Updater to let you know if the version you’re using is outdated

Basic Steps for Installing and Using MD Show Expired

1. Put the ext.md_show_expired.php file in your extensions folder
2. Put the lang.md_show_expired.php file in your language/english folder
3. Enable the extension, and tweak any of the settings you need

Settings

There are two settings.
Check for updates? – Works with LG Addon Updater. If you have LG Addon Updater installed, and this is set to “Yes”, you will be notified of new updates on the Control Panel homepage.
Extension Access – Enable access on a site-by site basis if using MSM (Multi-Site Manager)

EE Forum Thread

There is a related EE Forum thread for MD Show Expired here.

You can use a single template to handle the “landing page” for an area as well as the single-entry version of the page with a couple {if segment_3 != ""} and {if segment_3 == ""} conditionals. But when you introduce pagination, everything gets messed up. The goal was to avoid having to make a separate template to handle the single entries when pagination is used on the the same template. The URLs should look like the following using the (very basic) code sample that follows.

www.site.com/group/template/ – The “landing” page, that may include paginated items
www.site.com/group/template/P## – A paginated page in this area
www.site.com/group/template/itemtitle/ – Using the same template for a single entry

Super Basic Example:

Simple usage example, allowing Pagination and Single Entry on one template:

A simple way to detect if a page is NOT a paginated page is to do something like this:

Also check out this EE forum thread that spawned the plugin: Detecting a single entry using EE code. A thread called Can’t get pagination to work deals with this pagination issue using PHP.

Here is a link to the thread for this plugin in the EE Forums: Plugin: MD Detect Page Type.

Release Notes

1.0.1 Sep 29, 2008

• Added ability to check for category page and yearly archive page types
• Changed name from md_detect_pagination to md_detect_page_type

1.0.0 Sep 28, 2008 (5 downloads)

• Initial release.

I’ve been posting these sorts of updates to the Masuga Design Twitter account more recently, but thought I should post here too, for the RSS crowd, or those that simply don’t “tweet”.

I’ve been busy over the last few months jumping right from one project to the next, and haven’t had time to share what I’ve been up to. Here are the most recent additions to the Portfolio area, all of which I worked on for 50,000feet, a design agency out of Chicago:

Lucien Lagrange Architects
One of Chicago’s premier residence architects, responsible for many notable buildings in Chicago, among other places. View in the Portfolio »

Vibes Media
A Chicago-based mobile marketing and media company. View in the Portfolio »

PointOne Systems
A supplier of custom health data analytics. View in the Portfolio »

Orlando Events Center
Official site for the Orlando Events Center, which will be the future home for the NBA’s Orlando Magic. View in the Portfolio »

As I did in 2007, I again took the revised survey in 2008. If you’re in the Web Design field, you too should take the survey and add your data to the mix.

Overview

What’s with the name? Well, this was developed for those times when you’re using a “weblog as a gallery”. I thought of “WebGal”, “Galog”, and a bunch of other losers. “WG” is too short, so “Weegee” it is.

This works well if you have one weblog that is used as a “gallery”. Unfortunately, in a rush, this only works on a field whose Field Type is “File” – which is another 3rd-party extension, by Mark Huot. You can get File by Mark Huot here. You enter one field id (the field id for the File field you have) – and Weegee will put a thumb from that field on the Edit page. This also only works with one weblog right now (hey, you’re getting this free, so quit with the bellyachin’).

NOTE: If you need an image preview that will work with a regular custom field, or with more than one field in different weblogs, you should check out LG Image Preview. It takes the main idea behind Weegee and runs a bit further. (I haven’t confirmed whether it will work with a ‘File’ field type).

Basic Steps for Installing and Using Weegee

1. Put lang.weegee.php in your /system/language/english folder
2. Put ext.weegee.php in your /system/extensions folder.
3. Enable Weegee in Extensions (Admin > Utilities > Extensions Manager)
4. Enter the field id number of the File field for which you want to show thumbnails
5. Change the width of the thumbnails, if desired

Settings

There are two settings.
Field ID – Select the field ID for which you want to show thumbnails.
Width (in pixels) of the thumbnail – Defaults to 80 pixels (which is a pretty generous size). Keep in mind, these images are not currently cached as “real” thumbnails!

Versions/Changelog

You can view the changelog in the README at GitHub.

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 Weegee is here.