---
title: "BBCode plugin"
description: "Add basic BBCode input/output support to TinyMCE."
canonical_url: "https://www.tiny.cloud/docs/tinymce/5/bbcode/"
md_url: "https://www.tiny.cloud/docs/tinymce/5/bbcode/index.md"
version: "5"
last_updated: "2024-03-26T08:09:19Z"
tokens: 649
---
Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/).
# BBCode plugin

> **Important:** The BBCode plugin (`bbcode`) was deprecated with the release of TinyMCE 5.9. For details, see [the BBCode plugin deprecation notice](../release-notes59/#thebbcodebbcodeplugin). 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.

> **Note:** 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

```js
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](http://punbb.informer.com/). 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`

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

## Interactive example

**Example**

```js
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 }'
});
```