Important changes to Tiny Cloud pricing > Find out more

BBCode plugin

Add basic BBCode input/output support to TinyMCE.

Contribute to this page

This plugin makes it possible to edit BBCode in a WYSIWYG style by converting tags like [b] into <strong> and then back, when user submits the content.

You will need to sacrifice quite a lot of TinyMCE’s functionality to use this plugin properly, since BBCode format doesn’t support the whole HTML specification.

Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'bbcode'
});

Options

bbcode_dialect

This option allows you to specify the BBCode dialect. We only support PunBB. Supported tags are listed in the table below:

BBCode Description HTML equivalent
[b]...[/b] Bold text <strong>...</strong>
[i]...[/i] Italicize text <em>...</em>
[u]...[/u] Underline text <u>...</u>
[url=...]...[/url] Link <a href="...">...</a>
[img]...[/img] Image <img src="..." />
[color=...]...[/color] Color text <font color="...">...</font>
[code]...[/code] Code <span class="codeStyle">...</span>
[quote]...[/quote] Quote <span class="quoteStyle">...</span>
\n Newline <br />

When using PunBB dialect, codeStyle and quoteStyle will be converted to [code] and [quote] correspondingly.

Type: String

Default Value: "punbb"

Example: Using bbcode_dialect

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'bbcode',
  bbcode_dialect: 'punbb'
});

Interactive example

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.