WysiBB Technology Intelligence

What is WysiBB?

WysiBB is a lightweight WYSIWYG BBCode editor designed for forum software and community platforms. It provides a visual editor that generates BBCode (Bulletin Board Code) rather than HTML, making it compatible with traditional forum systems that use BBCode for formatting posts and comments.

Unlike HTML-based rich text editors, WysiBB understands the BBCode syntax used by phpBB, vBulletin, XenForo, and similar forum platforms. Users see formatted text while editing, but the underlying content uses BBCode tags like [b], [i], [url], and [img] that forums expect. This bridges the gap between modern editing expectations and legacy forum compatibility.

Key Features

BBCode Support

• Text Formatting: Bold [b], italic [i], underline [u], strikethrough [s]
• Links: URL tags with text labels [url=...]text[/url]
• Images: Inline images with [img] tags
• Quotes: Quoted content with attribution [quote=author]
• Code Blocks: Preformatted code with [code] tags
• Lists: Ordered and unordered lists
• Colors: Text color formatting

Editor Features

• WYSIWYG Mode: Visual editing with formatted preview
• Source Mode: Direct BBCode editing for power users
• Emoticons: Emoji and emoticon insertion
• Custom BBCodes: Extend with forum-specific tags
• Image Upload: Optional image upload integration

Technical Aspects

• jQuery Plugin: Easy integration with jQuery-based sites
• Lightweight: Minimal file size and dependencies
• Customizable Toolbar: Show only needed buttons
• Localization: Multi-language support

Use Cases

Forum Software Integration

Traditional forum platforms using BBCode integrate WysiBB to provide users a visual editing experience. Forums running phpBB, SMF, or custom BBCode-based systems replace plain textareas with WysiBB for improved usability while maintaining BBCode storage.

Legacy System Modernization

Organizations with existing BBCode content databases add WysiBB to modernize the editing experience without migrating content to HTML. The underlying BBCode format remains unchanged while users get WYSIWYG convenience.

Gaming Communities

Game forums and clan websites frequently use BBCode-based platforms. WysiBB helps community members create formatted posts, signatures, and guides without learning BBCode syntax.

Support Forums

Customer support communities running on forum software use WysiBB to help users format questions with code blocks, screenshots, and structured content that improves issue reporting.

Niche Communities

Specialized forums for hobbies, professions, and interest groups maintain BBCode systems while offering modern editing through WysiBB integration.

Implementation Examples

Basic Setup

<!-- Include dependencies -->
<link rel="stylesheet" href="wysibb/theme/default/wbbtheme.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="wysibb/jquery.wysibb.min.js"></script>

<textarea id="editor" name="content"></textarea>

<script>
$(document).ready(function() {
    $("#editor").wysibb({
        buttons: "bold,italic,underline,|,link,img,|,quote,code,|,bullist,numlist"
    });
});
</script>

Custom Configuration

$("#editor").wysibb({
    // Toolbar buttons
    buttons: "bold,italic,underline,strike,|,fontsize,fontcolor,|,link,img,video,|,quote,code,|,bullist,numlist,|,smilebox",

    // Enable source mode toggle
    allButtons: {
        source: { title: "Source", buttonHTML: '<span class="btn-inner">BBCode</span>' }
    },

    // Custom emoticons
    smileList: [
        { title: "Smile", img: "/images/smile.gif", bbcode: ":)" },
        { title: "Sad", img: "/images/sad.gif", bbcode: ":(" },
        { title: "Wink", img: "/images/wink.gif", bbcode: ";)" }
    ],

    // Image upload endpoint
    imgupload: true,
    img_uploadurl: "/api/upload-image"
});

Getting BBCode Content

// Get BBCode from editor
var bbcode = $("#editor").bbcode();
console.log(bbcode); // [b]Hello[/b] [i]World[/i]

// Set BBCode content
$("#editor").bbcode("[b]New content[/b] with [url=https://example.com]link[/url]");

// Get HTML representation
var html = $("#editor").htmlcode();

// Form submission
$("form").submit(function() {
    // Editor automatically syncs to textarea
    // BBCode is submitted with form
});

Adding Custom BBCode

// Add custom spoiler BBCode
var customButtons = {
    spoiler: {
        title: "Spoiler",
        buttonHTML: '<span class="btn-inner">Spoiler</span>',
        transform: {
            '<div class="spoiler">{SELTEXT}</div>': '[spoiler]{SELTEXT}[/spoiler]'
        }
    }
};

$("#editor").wysibb({
    buttons: "bold,italic,spoiler",
    allButtons: customButtons
});

Benefits and Status

Key Benefits

• BBCode Native: Generates BBCode that forums understand directly
• Lightweight: Small footprint suitable for forum pages
• User-Friendly: WYSIWYG for users unfamiliar with BBCode
• Customizable: Configure buttons, emoticons, and custom BBCodes
• jQuery Integration: Simple plugin architecture
• Free: MIT license for unrestricted use

Considerations

• Requires jQuery dependency
• Limited feature set compared to HTML editors
• Less active development in recent years
• Mobile experience varies

When to Use WysiBB

WysiBB is appropriate when your platform stores content in BBCode format and you want to provide visual editing. If your system uses HTML or Markdown, standard rich text editors are better choices.

Alternatives

• SCEditor: Another BBCode WYSIWYG editor with active development
• Forum-specific editors: XenForo, phpBB have built-in editors
• Markdown editors: For modern forums supporting Markdown

Migration Considerations

Forums considering modernization might evaluate whether to maintain BBCode or migrate to HTML/Markdown. WysiBB can serve as an intermediate step, providing better UX while planning long-term content strategy.