BBCode with Ruby on Rails, Part 2

This unfortunately got a little delayed, but here is part 2 of the BBCode with Ruby on Rails example.

In part 1 I showed how to add a simple bbcode system mostly based on regular expressions, here I will show how to make it easier for your users by adding some buttons above textarea’s which populate the bbcode for them. The final affect would be something like this:

BBcode JS example

To get started, first we will need a partial where the buttons will exist; I place it in a partials folder in the views folder:

views/partials/_bbcode_buttons.html.erb

1
2
3
4
5
6
7
8
9
10
11
12
13

<div style='margin-bottom: 2px;'>
  <%= link_to image_tag('assets/icon_bold.gif'), "javascript:BBcode.tag('b', '#{for_field}')", :title => 'Bold' -%>
  <%= link_to image_tag('assets/icon_italic.gif'), "javascript:BBcode.tag('i', '#{for_field}')", :title => 'Italic' -%>
  <%= link_to image_tag('assets/icon_underline.gif'), "javascript:BBcode.tag('u', '#{for_field}')", :title => 'Underline' -%>
  <%= link_to image_tag('assets/icon_strikethrough.gif'), "javascript:BBcode.tag('s', '#{for_field}')", :title => 'Strike Through' -%>
  <%= link_to image_tag('assets/icon_image.gif'), "javascript:BBcode.image('#{for_field}')", :title => 'Insert Image' -%>
  <%= link_to image_tag('assets/icon_link.gif'), "javascript:BBcode.url('#{for_field}')", :title => 'Insert URL' -%>
 
  <%= link_to image_tag('assets/icon_googlevid.gif'), "javascript:BBcode.gvideo('#{for_field}')", :title => 'Insert Google Video' -%>
  <%= link_to image_tag('assets/icon_youtubevid.gif'), "javascript:BBcode.yvideo('#{for_field}')", :title => 'Insert Youtube Video' -%>
 
  <%= link_to image_tag('assets/icon_bbcodehelp.gif'), "http://en.wikipedia.org/wiki/BBCode", :target => '_blank', :title => 'BBCode Help' -%>
</div>

The partial should be pretty easy to read, its just a few icons that are linked to javascript functions, for all the bbcode features we added in the first part of the tutorial. To use this then, anywhere they can enter bbcode, just above a textarea we would render it, here’s an example:

views/forum_posts/_form.html.erb

1
2
3
4
5

<% form_item do -%>
    <%= render :partial => '/partials/bbcode_buttons', :locals => { :for_field => 'forum_post_message' } -%>
    <%= f.text_area :message -%>
    <%= error_message_on :forum_post, :message -%>
<% end -%>

The for_field variable we pass is the id of the textarea we are inserting the bbcode into. Now, onto the real part, creating the javascript functions that will insert the bbcode when we press the buttons:

javascripts/bbcode.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

/*
 * Javascript for inserting BBcode
 *
 */
 
var BBcode = {
 
  // insert text
  insert: function(f, text) {
    /* Source: http://www.alexking.org/blog/2003/06/02 */
    f = $(f);
 
    if (document.selection) {
      // ie
      f.focus();
      var sel = document.selection.createRange();
      sel.text = text;
    } else if (f.selectionStart || f.selectionStart == '0') {
       // mozilla
       var startPos = f.selectionStart;
       var endPos = f.selectionEnd;
       f.value = f.value.substring(0, startPos) + text + f.value.substring(endPos, f.value.length);
    } else {
       f.value += text;
    }
    f.focus();
  },
 
  // insert tag
  tag: function(t,f) {
    var f = $(f);
    var start_tag = "[" + t + "]";
    var end_tag = "[\/" + t + "]";
 
    if (document.selection) {
      // ie
      f.focus();
      var selected = document.selection.createRange().text;
      var sel = document.selection.createRange();
      sel.text = start_tag + selected + end_tag;
    } else if (f.selectionStart || f.selectionStart == '0') {
      // mozilla
      var startPos = f.selectionStart;
      var endPos = f.selectionEnd;
      var text = start_tag + f.value.substring( startPos, endPos ) + end_tag;
      f.value = f.value.substring(0, startPos) + text + f.value.substring(endPos, f.value.length);
    } else {
      f.value += start_tag + end_tag;
    }
    f.focus();
  },
 
  // insert a url
  url: function(f) {
    var url = prompt("Please enter the url", "http://");
    if (url) {
      var text = "[url=" + url + "]" + "Link" + "[\/url]";
      BBcode.insert(f, text);
    }
  },
 
  // insert an image
  image: function(f) {
    var url = prompt("Please enter the image url", "http://");
    if (url) {
      var text = "[img]" + url + "[\/img]";
      BBcode.insert(f, text);
    }
  },
 
  // insert a youtube video
  yvideo: function(f) {
    var url = prompt("Please enter the youtube video url", "http://");
    if (url) {
      var text = "[youtube]" + url + "[\/youtube]";
      BBcode.insert(f, text);
    }
  },
 
  // insert a google video
  gvideo: function(f) {
    var url = prompt("Please enter the google video url", "http://");
    if (url) {
      var text = "[gvideo]" + url + "[\/gvideo]";
      BBcode.insert(f, text);
    }
  }
}

In the BBcode.insert function, I sourced a blog post I found while trying to figure this out, where they had created an insertAtCursor function, which determines where the text should be put into the text field. I modified it somewhat and then created a similar version for the BBcode.tag function, which needs to be able to wrap tags around selected text.

With that javascript in place, all of the buttons should now work, and rendering the buttons above a textarea will allow a user to click on them to easily insert some bbcode into their posts =)

About this entry

You’re currently reading “BBCode with Ruby on Rails, Part 2,” an entry on Nazgum’s Blog

Published:
Sunday, March 23rd, 2008 at 12:36 am
Author:
Nazgum
Category:
Javascript, Rails
« Previous
Next »