WYSIWYG BBCode Editor Based On Bootstrap And Ace Editor

A simple, configurable, multi-language WYSIWYG BBcode editor built with jQuery, Bootstrap 4, Font Awesome 4/5, and Ace editor.

What is BBCode?

BBCode (bulletin board code) is a markup language used to format user's posts in many message boards. 

See also:

• Lightweight HTML and BBCode WYSIWYG Editor - SCEditor

How to use it:

1. Load the jQuery library and Bootstrap 4 framework in the project.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.slim.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Load the Font Awesome 4 or Font Awesome 5 in the head of the document.

<link rel="stylesheet" href="/path/to/fontawesome-5.min.css" />
<link rel="stylesheet" href="/path/to/fontawesome-4.min.css" />

3. Load the Ace editor.

<script src="/path/to/ace.js"></script>

4. Load the WYSIWYG BBCode Editor's core JavaScript and CSS files in the document.

<link rel="stylesheet" href="editor.css">
<script src="editor.js"></script>

5. Load a language file from the lang folder. All supported languages:

• en_EN.js
• es_ES.js
• fr_FR.js
• hu_HU.js
• it_IT.js
• nl_NL.js
• pr_PR.js
• zh+CN.js

<script src="lang/en_EN.js"></script>

6. Load the icon set for the editor.

<-- Font Awesome 5 -->
<script src="icons/font-awesome-5.js"></script>
<-- Font Awesome 4 -->
<script src="icons/font-awesome-4.js"></script>

7. Initialize the WYSIWYG BBCode Editor on the container elemenet and hide the copyright bar.

<div id="editor"></div>

$(function() {
  $('#editor').wysiwyg_editor({
    enableFooter: false
  });
});

8. Customize the WYSIWYG BBCode Editor by overiding the default settings as displayed below:

$('#editor').wysiwyg_editor({
  selector: "",
  enableFooter: true,
  defaultValue: "",
  lang: "en-EN",
  icons: "font-awesome-5",
  includedButtons: [
  ['bold', 'italic', 'underline'], ['strikethrough', 'superscript', 'subscript'], ['font-name', 'font-size', 'color'], ['unordered-list', 'ordered-list', 'align'], ['link', 'image', 'media'], ['misc', 'advcode', 'table']
  ],
  height: "auto",
  width: "auto",
  enableWordCount: false,
  maxCharacters: 250,
  colorPresets: ['#1ABC9C', '#16A085', '#2ECC71', '#27AE60', '#3498DB', '#2980B9', '#34495E', '#2C3E50', '#EA4C88', '#CA2C68', '#9B59B6', '#8E44AD', '#F1C40F', '#F39C12', '#E74C3C', '#C0392B', '#ECF0F1', '#BDC3C7', '#95A5A6', '#7F8C8D'],
  enableLinkTarget: true,
  linkTargetTemplate: '<input type="checkbox" id="{id}" checked> {lang.target}',
  enableImageInsertAlert: true,
  enableImagePreview: true,
  enableMediaPreview: true,
  advancedCodeEnabledLanguages: ['General Code', 'HTML', 'CSS', 'Javascript', 'PHP', 'XML', 'JSON', 'SQL', 'Ruby', 'Python', 'Java', 'C', 'C#', 'C++', 'Lua', 'Markdown', 'Yaml'],
  advancedCodeEditorTheme: "chrome",
  miscItems: ['quote', 'code', 'spoiler', 'linebreak']
});

---

This awesome jQuery plugin is developed by MrAnonymusz. For more Advanced Usages, please check the demo page or visit the official website.