About

BBCode (Bulletin Board Code) remains the de facto markup language for web forums, signature blocks, and legacy CMS platforms where HTML is restricted or sanitized. Generating correct BBCode by hand is error-prone: one unclosed [b] tag corrupts the entire post rendering, and nested structures like [quote][list][url] chains fail silently on most parsers. This editor provides a WYSIWYG surface that converts rich formatting into valid, nested BBCode in real time. It handles edge cases such as overlapping tags, empty elements, and whitespace normalization that manual writing consistently gets wrong.

The converter walks the DOM tree of the editor content and maps each HTML node to its BBCode equivalent using a deterministic traversal algorithm. Limitations: the output targets the most common BBCode dialect (phpBB/SMF/vBulletin). Custom tags like [spoiler] or [youtube] are not generated automatically. Paste operations strip unsafe HTML attributes to prevent injection. Pro tip: always preview your BBCode on the target forum before submitting long posts - parser implementations vary between platforms.

Formulas

The editor converts rich HTML from the WYSIWYG surface to BBCode using a recursive DOM tree traversal algorithm. For each node N in the editor's DOM:

{

map(N) → [tag] + children(N) + [/tag] if N is Elementescape(N.textContent) if N is Text node∅ if N is Comment or Script

The mapping function map uses a lookup table: B → [b], I → [i], A → [url=href], IMG → [img], and so on. Inline styles are parsed for color and font-size properties and mapped to [color=v] and [size=v] respectively. Traversal is depth-first, preserving nesting order.

Where N = DOM node, map = HTML-to-BBCode tag lookup, children = recursive processing of child nodes, escape = text sanitization function that preserves line breaks as newlines.

Reference Data

BBCode Tag	Syntax	Description	HTML Equivalent	Forum Support
Bold	[b]text[/b]	Bold text	<b>	Universal
Italic	[i]text[/i]	Italic text	<i>	Universal
Underline	[u]text[/u]	Underlined text	<u>	Universal
Strikethrough	[s]text[/s]	Strikethrough text	<s>	Most forums
URL (Auto)	[url]href[/url]	Link with URL as label	<a href>	Universal
URL (Labeled)	[url=href]text[/url]	Link with custom label	<a href>	Universal
Image	[img]src[/img]	Embedded image	<img>	Universal
Quote	[quote]text[/quote]	Block quotation	<blockquote>	Universal
Code	[code]text[/code]	Monospaced code block	<pre><code>	Universal
Color	[color=#hex]text[/color]	Colored text	<span style="color">	Most forums
Size	[size=n]text[/size]	Font size (1 - 7 or px)	<span style="font-size">	Most forums
Unordered List	[list][*]item[/list]	Bulleted list	<ul><li>	Universal
Ordered List	[list=1][*]item[/list]	Numbered list	<ol><li>	Most forums
Align Center	[center]text[/center]	Centered text	<div style="text-align:center">	Most forums
Align Right	[right]text[/right]	Right-aligned text	<div style="text-align:right">	Some forums
Horizontal Rule	[hr]	Horizontal divider	<hr>	Some forums
Table	[table][tr][td]cell[/td][/tr][/table]	Data table	<table>	vBulletin, XenForo
Spoiler	[spoiler]text[/spoiler]	Collapsible content	Custom JS toggle	XenForo, SMF
Email	[email]addr[/email]	Email link	<a href="mailto:">	Most forums
YouTube	[youtube]id[/youtube]	Embedded video	<iframe>	XenForo, custom

Frequently Asked Questions

The editor uses recursive DOM tree traversal. When you apply bold, italic, and underline simultaneously, the browser nests HTML elements (). The converter walks each node depth-first and wraps content with the corresponding BBCode tags in the correct nesting order, ensuring all tags close in reverse opening order - which is the requirement of every compliant BBCode parser.

The editor sanitizes pasted HTML to extract only BBCode-compatible formatting. Word processors inject proprietary CSS classes, conditional comments, and XML namespaces that have no BBCode equivalent. The paste handler strips these artifacts and retains only semantic elements: bold, italic, underline, links, images, and lists. This prevents broken output on the target forum.

The output follows the phpBB/vBulletin common dialect, which is supported by over 90% of forum platforms including SMF, XenForo, MyBB, Discourse (with plugin), and Invision Community. Tags like [b], [i], [u], [url], [img], [quote], [code], [list], [color], and [size] are universal. Platform-specific tags like [spoiler] or [youtube] are not generated automatically since parser support varies.

The editor converts all color formats (RGB, RGBA, HSL, named colors) to 6-digit hexadecimal notation (e.g., #FF5733) for maximum forum compatibility. Most BBCode parsers only accept hex colors. If a color cannot be parsed, the [color] wrapper is omitted and the text is output without color formatting to prevent syntax errors.

If you paste a raw URL into the editor, it remains as plain text. To create a link, select text and use the Link button (or Ctrl+K), then enter the URL. For images, use the Image button and provide the image URL - the editor generates [img]url[/img] BBCode. The editor does not auto-detect URLs in body text because auto-linking behavior varies across forum parsers and can produce double-wrapping issues.

Yes. Each paragraph (

in the editor) produces a double newline in the BBCode output. Shift+Enter creates a single line break (mapped to one newline). Consecutive empty lines are normalized to a maximum of two newlines to prevent excessive whitespace, which most forum renderers collapse anyway.