Skip to:

bbCode toolbar with markItUp! editor

  • 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

    * 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() {
    <!-- 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" />';


    * 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:

    Hope that this will be useful to someone :) Cheers!

Viewing 4 replies - 1 through 4 (of 4 total)

  • chrishajer


    Rescued this post from Akismet



    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!

    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 forums could also use a simple toolbar. Not so sophisticated but at least like the one on

    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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.
Skip to toolbar