Skip to:
Content
Pages
Categories
Search
Top
Bottom

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

    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 9 replies - 1 through 9 (of 9 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!

    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

    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

    @killer_x10

    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

    @robkk

    @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

    @killer_x10

    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

    @robkk

    @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

    @killer_x10

    @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

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