Some time ago I came across markItUp! – a markup editor written as a jQuery plugin. It can be attached to any textarea, providing editing interface to it. The best thing is that it that interface can be totaly customized and there are many sets that are ready to be downloaded, among which is a bbCode set.

I’ve been using _ck_’s bbCode toolbar plugin but it lacked buttons for adding colors and changing font-size, so I decided to swap it for markItUp. It turned up quite nicely and the code is dead simple. Here it goes:

First, download markiItUp, along with the necessery bbCode set

http://markitup.jaysalvat.com/downloads/download.php?id=releases/latest

http://markitup.jaysalvat.com/downloads/download.php?id=markupsets/bbcode

http://markitup.jaysalvat.com/downloads/download.php?id=addons/bbcode/colors

* the color set is seperate by default, so you’d have to merge it to the bbCode set later

Upload the downloaded files to a directory on your server (my choice was my-plugins/scripts) and include them in your template. You can do that using bb_head in functions.php of the theme (bbPress 1.x) or as a mini plugin (bbPress 0.9.x)

/*

Plugin Name: markItUp! for post form

*/

function mark_it_up_init() {

echo '

<!-- markItUp! scripts -->

<script type="text/javascript" src="' . bb_get_option('uri') . 'my-plugins/scripts/markitup/jquery.markitup.js"></script>

<script type="text/javascript" src="' . bb_get_option('uri') . 'my-plugins/scripts/markitup/sets/bbcode/set.js"></script>

<script type="text/javascript" >

jQuery(document).ready(function() {

jQuery("#post_content").markItUp(mySettings);

});

</script>

<!-- markItUp! stylesheets -->

<link rel="stylesheet" type="text/css" href="' . bb_get_option('uri') . 'my-plugins/scripts/markitup/skins/simple/style.css" />

<link rel="stylesheet" type="text/css" href="' . bb_get_option('uri') . 'my-plugins/scripts/markitup/sets/bbcode/style.css" />';

}



add_action('bb_head','mark_it_up_init');

* Or you could just add that code to your header.php (without the PHP function wrap-up).

And last but most important – include jQuery before markItUp! in your template. That is best done using <?php bb_enqueue_script('jquery'); ?>

You can see it in action on the forum that I manage:

http://comicsbistro.net/forum/?new=1

Hope that this will be useful to someone Cheers!

[chrishajerParticipant @chrishajer 2 years, 10 months ago]

Rescued this post from Akismet

[kevinjohngallagherMember @kevinjohngallagher 2 years, 10 months ago]

Indeed mate,

this is what I use, and it really is awesome.

I’ve managed to get my whole JS down to about 1-2% of what TinyMCE is.

A well written post too!

[Ivaylo DraganovMember @dragunoff 2 years, 10 months ago]

A well written post too!

Thanks! Just a bit too many links for Akistmet though

And of course it could not be seen in action on my forum, because it is visible only to logged in users… silly me

The bbpress.org forums could also use a simple toolbar. Not so sophisticated but at least like the one on wordpress.org

[Ivaylo DraganovMember @dragunoff 2 years, 10 months ago]

Just came to my mind that bbPress does not support bbCode without a plugin.

But the good thing is that this technique can be easily adopted for use with HTML input by simply changing the toolbar set used by markItUp.