WYSIWYG BBCode Editor Based On Bootstrap And Ace Editor
File Size: | 24.4 KB |
---|---|
Views Total: | 5728 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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.