CoreUI › BBCode Text Editor

BBCode text editor plugin.

Start

Include b-b-code.min.js just after the h-t-m-l.min.js script:

<!DOCTYPE html>
<html dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Test Editor</title>
    <link href="text-editor/ui.i.min.css" rel="stylesheet">
    <link href="text-editor/ui.min.css" rel="stylesheet">
  </head>
  <body>
    <p><textarea id="editor"></textarea></p>
    <script src="text-editor.min.js"></script>
    <script src="text-editor/ui.min.js"></script>
    <script src="text-editor/ui/h-t-m-l.min.js"></script>
    <script src="text-editor/ui/b-b-code.min.js"></script>
    <script>
    var editor = TE.ui.BBCode(document.querySelector('#editor'));
    </script>
  </body>
</html>

Configure

Instance

TE.ui.BBCode(node, config);
var editor = TE.ui.BBCode(document.querySelector('#editor'), { … });

Configuration

The available configuration data are:

Keyboard Shortcuts

Depends → Special Cases

Try pressing the key in these position, where | represent the text editor caret.

[ul]
  [li]|[/li]
[/ul]
[ul]
  [li class="foo"]|[/li]
[/ul]
[ul]
  [li]foo|[/li]
[/ul]
[ul]
  [li][url=#]foo[/url]|[/li]
[/ul]
[ul]
  [li class="foo"][a href="#"]foo[/a]|[/li]
[/ul]

Try pressing the key in these position, where | represent the text editor caret.

[li]abc|[/li]

Try pressing the key in these position, where | represent the text editor caret.

[p class="foo"][/p]|
[p class="foo"]|[/p]