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!

[@chrishajer Participant 14 years, 5 months ago]

Rescued this post from Akismet

[@kevinjohngallagher Member 14 years, 5 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!

[@dragunoff Member 14 years, 5 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

[@dragunoff Member 14 years, 5 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.

[@killer_x10 Participant 9 years, 5 months ago]

Hey, I know this is old.. but I really need a better Toolbar, does anyone know how it works? I tried this way but I can’t understand it very well, since I am not very good with neither php or developing.

Thank you very much 🙂

[@robkk Moderator 9 years, 5 months ago]

@killer_x10

This topic was way back in bbPress v1, so nothing is good for this current version.

There is a way to use shortcodes (bbcode) as long as they are whitelisted for users in the quicktags toolbar but this would require some editing of some javascript.

You can also use the TinyMCE toolbar, adding bbcode to this would be more difficult then editing the quicktags toolbar.

[@killer_x10 Participant 9 years, 5 months ago]

I understand, thank you anyway Robkk.. btw I am actually testing another Toolbar Plugin and I am editing some stuff around and my first Test went okay, now I’m just editing that Toolbar Plugin to add up with bbcode.

[@robkk Moderator 9 years, 5 months ago]

@killer_x10

There is a toolbar plugin which is quite old. Just so you know if you plan to fix it up, you might as well structure it out better, because with all of its inline javascript it will add about 3 seconds load time to your site.

There is also a way to hook up other toolbars that could be just for bbcode into bbpress also.

[@killer_x10 Participant 9 years, 5 months ago]

@Robkk

Thank you for the Information but I am just replacing all the HTML Tags with bbcode tags, nothing special because I am very bad at php and javascript, I know very little js and just started with php. Btw I have finished it, just couldn’t get 1 thing right, Close HTML Tags.

Here’s the Link to the Topic: https://bbpress.org/?post_type=topic&p=164557