<< Dangers of the new ASP.NET MVC framework | Copenhagen geek dinner update 2 >>

BBCode extension for BlogEngine.NET 1.2

by Mads Kristensen 5. November 2007 01:15

I wrote a little extension for BlogEngine.NET 1.2 that parses BBCode for use in the comments. BBCode allows you to write square bracket syntax to format your text. It’s smart because it gives more power to the people commenting and it gives you total control over the HTML output because BBCode is not HTML – the parsing takes place server side when the comment is served and not when it is saved.

So, when you write a comment you can now use these few BBCode tags. More will come when I find out which ones make most sense.

Bold
[b]some text[/b]

Italic
[i]some text[/i]

Cite
[cite]some text[/cite]

You can easily add new tags your self by adding a single line in the extension. Also, if you want to be able to write BBCode syntax in your posts, you can easily do that by adding a single line to the constructor of the extension. Just type in this line:

Post.Serving += new EventHandler<ServingEventArgs>(Post_CommentServing);

Safety first

A BBCode parser is not as straight forward to write as you might expect. It’s not just a matter of replacing [b] with since that can lead to trouble. Let’s say someone writes this comment:

It’s a [b]lovely weather today.

If we just replace [b] with  then the entire page will become bold since the tag is never closed. That means a wrong formatted comment can turn your entire website into something very ugly.

Instead we need to make sure that all BBCode tags are closed before we parse them. This extension will parse all the correctly closed BBCode tags even though there is a malformed tag in the same comment. It simply ignores the malformed tag and moves on and thereby doesn’t screw with the design of the site.

Implementation

Download the BBCode.cs file below and paste it into the /App_Code/Extensions/ folder of your BlogEngine.NET 1.2 installation.

BBCode.zip (721 bytes)

* Only $4.95/month ASP.NET & Windows 2008 + IIS 7 Hosting! FREE SQL Included

0d985373-eb11-47d0-9c61-bb84a0f94077|5|4.6

Tags: blogengine, languages

BlogEngine

New extension model in BlogEngine.NETShows how to utilize the new extension model of BlogEngine.NETBlogEngine.NET 1.2 is releasedThe release announcement of BlogEngine.NET 1.2New events in BlogEngine.NET 1.2A list of all the events exposed by BlogEngine.NET 1.2

Comments

11/5/2007 1:50:07 AM #

Cool! Does it support any attributes?

Josh Stodola |

11/5/2007 1:56:23 AM #

No, not at this moment and I'm not sure I'll implement that. It only makes sense for applying color and font size and I don't think I want people to do that. What do you think?

Mads Kristensen |

11/5/2007 2:21:29 AM #

You're right, you probably shouldn't allow users to change size or color of the text.

However, I think it'd be awesome to actually allow certain HTML tags and attributes. You see that on Subtext, and on Wordpress too. I think that is the ultimate solution. That would allow commenters to give descriptions and tooltips to links, which is good for SEO.

(I emailed Phil a month or so ago and asked him if he'd be willing to write a post on how Subtext achieves this. He said he put it on his list of things to do. What a guy!)

Josh Stodola |

11/5/2007 2:45:55 AM #

There is a difference in the way BlogEngine and SubText/WordPress handles links in comments. BlogEngine.NET resolves them automatically without having to enter HTML tags which I strongly prefer. Of course as you mention your self, then people can't use descriptions and tooltips. Still, I believe that auto-resolving links are way better than writing HTML. Then again, both scenarios could be implemented at the same time.

Mads Kristensen |

11/5/2007 2:53:48 AM #

Exactly what I was thinking (both could be implemented).

It is very nice just to paste a URL into the message and have it resolved automatically, but the option to use the tags would be great for accessibility.

Josh Stodola |

11/5/2007 2:55:46 AM #

I like the idea of implementing both for simple SEO reasons.

Also what is the likelyhood of being able to write extensions to override some of the default behaivor's of BE.NET for better SEO optimization?

Documentation Nut |

11/5/2007 3:10:43 AM #

Much of the SEO stuff can be modified and improved in the themes. For the auto resolved comment links, I could move that logic to an extension. Then you can change the behavior there. Are there any specific SEO changes you want done?

Mads Kristensen |

11/5/2007 3:15:15 AM #

I found 1 or 2 but can't find the list right now. When I find them i'll post them up. They weren't major at all I just didn't want to bother you with them as i know you'd rather probably concentrate on makeing BE.NET better.

Oh and another question is it possible to store custom xml files that we create for configuring plugin information in the App_Data folder? I keep running into funny "can't find location" error when I try.

I'll keep looking for those notes i made.

Documentation Nut |

11/5/2007 3:17:40 AM #

Sure, you can always use the App_Data folder. Use BlogSettings.Instance.StorageLocation to get an absolute path to the folder.

Mads Kristensen |

11/5/2007 3:27:19 AM #

Ok, thanks. Just wanted to be sure. Maybe I just have a server problem to resolve then.

Documentation Nut |

11/5/2007 3:47:33 AM #

Didn't I send in an extension (about a month ago) that did exactlly this? I thought I did, but I might have just written it and never done anything with it....

In any case, awesome! I'm glad this is a supported feature now.

Joe |

11/5/2007 5:01:28 AM #

@Joe, I did get a BBCode extension sent some time ago. I don't remember from who, but it must be from you. I saw this request from the CodePlex issue tracker and thought about writing the extension www.codeplex.com/.../View.aspx?WorkItemId=4274

I know I had the mail, but I couldn't find it - even when I searched all Outlook folders it didn't turn up. So I had to do it from scratch.

Mads Kristensen |

11/5/2007 5:37:47 AM #

Amazing, Mads! Thanks a lot

Davis Sousa |

11/5/2007 9:31:25 PM #

Check out what WTF allows for BBCode:

www.worsethanfailure.com/Info/BBCode.aspx

Scott Stocker |

11/6/2007 3:16:51 AM #

Is there any reason you are not using regular expression to do the parsing?

Ingi Gauti |

11/6/2007 3:31:49 AM #

@Ingi

Yes, that's because I don't know how to write a regular expression that checks for equal amounts of opened and closed BBCode tags before doing the parsing.

Mads Kristensen |

11/6/2007 3:46:06 AM #

Mads you should leet it be done by the editor don't you

Mabyre |

11/6/2007 6:33:50 AM #

I put to gather the code using regex.

 string s = @"Hello World, this is [cite]some text[/cite] that has bold,
 italic, broken bold and broken italic
 and should just [i]work";

 Response.Write(ParseText(s));

 public string ParseText(string s) {
 string pattern = @"(\[(?<Element>b)\])[^\[]*(\[/(?<Element>b)\])
 |(\[(?<Element>i)\])[^\[]*(\[/(?<Element>i)\])
 |(\[(?<Element>cite)\])[^\[]*(\[/(?<Element>cite)\])";

 s = Regex.Replace(s, pattern, new MatchEvaluator(ReplaceText), RegexOptions.IgnoreCase|RegexOptions.IgnorePatternWhitespace);
 }

 Hashtable map = new Hashtable();
 map.Add("b", "strong");
 map.Add("i", "em");

 public string ReplaceText(Match m) {

 string s = m.Value.Replace("[", "<").Replace("]", ">");

 if (map.ContainsKey(m.Groups["Element"].Value)) {
 s = Regex.Replace(s, "(</?)" + m.Groups["Element"].Value + "(>)",
 "$1" + (string) map[m.Groups["Element"].Value] + "$2");
 }

 return s.ToLower(); //ToLower is for xhtml since all elements should be lower case
 }

The biggest problem with it is the mapping of b to strong, and i to em, which makes the code little longer.

The key to make regex check if the code is valid is this regex: [^\[]* which tells it to look for any character except [ between e.g. [b] and

If we would skip the mapping of b to strong then this regex would be enough: \[b\][^\[]*\[/b\]

Ingi Gauti |

11/6/2007 6:53:13 AM #

Ups, didn't go as planned. Hope you can understand the code otherwise I can email it to you. Can't seem figure out how to skip all those smiley faces.

Maybe a missing feature that should be below the comment box, Disable BBCode and smileys

Ingi Gauti |

11/6/2007 7:45:44 AM #

Mads, here is how I did it in the version I sent you:

private void FormatForPost(ServingEventArgs comment)
{
 RegexOptions options = RegexOptions.IgnoreCase | RegexOptions.Multiline | RegexOptions.Singleline;
 Regex boldEX = new Regex(@"\[B\](?<inner>(.*?))\[/B\]", options); //bold

 NestedReplace(comment, boldEX, "${inner}");
}

private void NestedReplace(ServingEventArgs comment, Regex regexMatch, string replaceString)
{
 Match m = regexMatch.Match(comment.Body);
 while (m.Success)
 {
 string tStr = replaceString.Replace("${inner}", m.Groups["inner"].Value);
 comment.Body = comment.Body.Substring(0, m.Groups[0].Index) + tStr + comment.Body.Substring(m.Groups[0].Index + m.Groups[0].Length);
 m = regexMatch.Match(comment.Body);
 }
}

Joe |

11/6/2007 7:49:10 AM #

There may be a bug with the emote. code. In the comment above (see line 8: "NestedReplace" call)

notice the wink? the line of code should be. What there would have caused a wink?

NestedReplace(comment, boldEX, "${inner} " ) ;

Joe |

11/6/2007 3:33:20 PM #

Good work, Mads! I have added this extension and a little toolbar (with a simply javascript) to auto-insert the BBCode in the comment textArea.
You can view how it work in my site ... Enjoy

Cristiano |

11/10/2007 3:22:18 AM #

Hmm, but it doesn't work in live preview... any idea how to hook that in? Seems like it would be difficult.

Domenic Denicola |

11/11/2007 6:32:45 AM #

Trackback from CristianoFino.NET

Una procedura per quotare automaticamente i commenti in un post

CristianoFino.NET |

11/11/2007 10:22:30 AM #

I have added this extension and a little toolbar (with a simply javascript) to auto-insert the BBCode in the comment textArea.

Crisitano's implementation is fantastic, and a great looking skin to boot!

Dan |

11/21/2007 12:30:59 PM #