tail.bbsolid v0.1.1
tail.BBSolid - A BBCode Markup Parser
tail.BBSolid is a expendable and easy-to-use BBCode Parser, written in vanilla JavaScript and
available for your Browser, as AMD Module as well as for nodeJS! It already supports 46 BBCode
Markups (+12 special markups are excluded in a separate file) and BBCode Tag Attributes as
[tag attr=value]
, [tag attr="value"]
or [tag="value"]
.
This script is inspired by Patorjks Extendible BBCode Parser!
The tail.BBSolid Markup Parser is currently an experimental Alpha version, and still may contains some bugs. It would be really helpful if you write us each issue and request on the official GitHub Issues Page. Thanks!
Features
- 46 BBCode Tags (+ 12 Separated Special Tags) (+ 12 Aliases) (+ Attributes)
- Parent -> Children Relationships / Restrictions
- Valid HTML (5), no Stylesheet required!
- Support for the latest Browsers, including Internet Explorer 9+
debug
Shows the Errors directly in the console (including the index)prettyPrint
Make the Output HTML Code as pretty as possibleallowedHTML
Define allowed HTML Tags, or dis/enable any HTML.wrapParagraphs
Paragraph-Wrapping around "Inline" elementsshowLineBreaks
Line Break Sequenzes within ParagraphsremoveUnparsed
And Faulty BBCode Tags.
Usage
Smart Usage Code:
// BBSolid is an Alias for BBSolid.parse(content, config)
var HTMLContent = BBSolid("[b]Your BBCode Content[/b]", {
debug: false, // Writes each error directly in the console
prettyPrint: true, // Try to "pretty" format the HTML Code.
allowedHTML: true, // The allowed HTML Tags as Array, True to allow any, False to disable any HTML Tag
wrapParagraphs: true, // Wrap Content in <p> Paragraphs
showLineBreaks: true, // Replaces single \n within <p> Paragraphs into <br />
removeUnparsed: false // Remove Unparsed / Faulty BBCodes
});
// Get the latest "passed" content with
var LatestBBCodeContent = BBSolid.content;
// Get the latest "parsed" content with
var LatestHTMLContent = BBSolid.parsed;
// Check if the latest passed occured an Error
if(BBSolid.error){
console.log( BBSolid.errors );
}
Available BBCodes
Inline Elements
BBCode | Alt. | Attributes | Examples |
---|---|---|---|
noparse | bbcode | null | noparseBold[/b] /noparse |
b | color, font, size | bBold/b | |
strong | color, font, size | strong color=redRed String/strong | |
i | color, font, size | i font=serifSerif Italic/i | |
em | color, font, size | em size=12pxSmall Emphasized/em | |
u | color, font, size | u font=serif color=#000Back Serif underlined/u | |
ins | color, font, size | insJust inserted Text/ins | |
s | color, font, size | sStrikethroughed Text/s | |
del | color, font, size | del size=largerLarger Deleted Text/del | |
sub | color, font, size | sub color="rgb(0, 255, 0)"Green subscripted Text/sub | |
sup | color, font, size | sup font=ArialArial Superscripted Text/sup | |
big | large | color, font, size | bigBig Text/big |
small | color, font, size | smallSmall Text/small | |
font | face | font* | font=ArialArial Text/fontfont font=TimesTimes Text/font |
size | size* | size=20pxBig Text/sizesize size=smallSmall Text/small | |
color | color* | color=steelblueSteelBlue Text/colorcolor color=#000Black Text/color | |
url | link | href*, target | urlhttps://example.com /urlurl=https://example.com target=_blankCustom Text/url |
img | image | src*, alt** | imghttp://image.url /imgimg=http://image.url Alt Text/img |
mail* | mailinfo@example.com/mailmail=info@example.comCustom Text/mail | ||
code | null | codeAny Code, BB Tags doesn't get parsed in here |
Legende
All Attributes marked with an * can be used inline, for example:
Default: [bbcode attribute=value][/bbcode]
Inline: [bbcode=value][/bbode]
The 'alt**' attribute on the 'img' and 'image' tags can also used WITHIN the tags:
Default: [img]http://www.example.com/image.png[/img]
Parameter: [img src=http://www.example.com/image.png alt="Alternative Text"][/img]
Inline: [img=http://www.example.com/image.png alt="Alternative Text"][/img]
Within: [img=http://www.example.com/image.png]Alternative Text[/img]
Block Elements
Some Block elements allows only a few BBCode Tags, or requires a specific Parent BBCode Tag.
BBCode | Alt. | Attributes | Note |
---|---|---|---|
h1 | h | null | First Header |
h2 | null | Second Header | |
h3 | null | Third Header | |
h4 | null | Fourth Header | |
h5 | null | Fifth Header | |
h6 | null | Sixth Header | |
hr | null | Horizontal Rule, doesn't require an closing tag! | |
left | null | Left-Align Paragraph | |
right | null | Right-Align Paragraph | |
center | null | Center-Align Paragraph | |
justify | null | Justify-Align Paragraph | |
quote | cite* | Blockquote with optional cite. | |
codeblock | language* | Codeblock with additional language-classnames. | |
table | null | Allows: thead , tbody , tfoot and tr | |
thead | null | Allows: tr Requires: table | |
tbody | null | Allows: tr Requires: table | |
tfoot | null | Allows: tr Requires: table | |
tr | null | Allows: th , td Requires: table , thead , tbody or tfoot | |
th | align, valign, colspan, rowspan | Requires: tr | |
td | align, valign, colspan, rowspan | Requires: tr | |
list | ul | type* | Allows: li , * |
li | * | null | * doesn't require an closing tag!Required: list , ul or ol |
dl | null | Allows: dt , dd | |
dt | null | Requires: dl | |
dd | null | Requires: dl |
Legende
All Attributes marked with an * can be used inline, for example:
Default: [bbcode attribute=value][/bbcode]
Inline: [bbcode=value][/bbode]
Extended Elements
You need to include the tail.bbsolid-extended.js
JavaScript file, to use the following BBCode
Tags. (on nodeJS: Include ONLY the extended file, but make sure, that the main file is available
in the same folder as the extended file)!
BBCode | Attributes | Note |
---|---|---|
address | null | HTML5: Address Block |
caption | align* | Table CaptionRequires: table |
mark | null | HTML5: Mark some Content |
q | null | HTML5: Inline Quotation |
abbr | title* | Abbreviation |
acronym | title* | Acronym |
dfn | title* | Definition |
embed | src*, width, height | Embed some Content |
audio | src*, width, height, autoplay, loop | HTML5: Embed a Audio Source |
video | src*, width, height, autoplay, loop | HTML5: Embed a Video Source |
youtube | src*, width, height | Embed a YouTube Video, using iframe. |
spoiler | title*, close | Create an Spoiler element |
Legende
All Attributes marked with an * can be used inline, for example:
Default: [bbcode attribute=value][/bbcode]
Inline: [bbcode=value][/bbode]