BBCode plugin

The BBCode plugin (bbcode) was deprecated with the release of TinyMCE 5.9. For details, see the BBCode plugin deprecation notice. The BBCode plugin will be removed in TinyMCE 6.0.

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

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="bbcode">
  <p>Press the <b>&lt;&gt;</b> (Source code) button to see the content output in <em>bbcode</em> format.</p>
  <p><b>Example bold text.</b></p>
  <p><i>Example italic text.</i></p>
</textarea>
tinymce.init({
  selector: 'textarea#bbcode',
  height: 200,
  plugins: 'bbcode code',
  toolbar: 'undo redo | bold italic underline | code',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});