Skip to:
Content
Pages
Categories
Search
Top
Bottom

bbCode toolbar with markItUp! editor


  • Ivaylo Draganov
    Member

    @dragunoff

    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!

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

  • chrishajer
    Participant

    @chrishajer

    Rescued this post from Akismet


    kevinjohngallagher
    Member

    @kevinjohngallagher

    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 Draganov
    Member

    @dragunoff

    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 Draganov
    Member

    @dragunoff

    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.