0.1.1 • Published 7 years ago

tail.bbsolid v0.1.1

Weekly downloads
2
License
MIT
Repository
github
Last release
7 years ago

tail.BBSolid - A BBCode Markup Parser

npm Version License Author

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!

Demonstration

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 possible
  • allowedHTML Define allowed HTML Tags, or dis/enable any HTML.
  • wrapParagraphs Paragraph-Wrapping around "Inline" elements
  • showLineBreaks Line Break Sequenzes within Paragraphs
  • removeUnparsed 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

BBCodeAlt.AttributesExamples
noparsebbcodenullnoparseBold[/b] /noparse
bcolor, font, sizebBold/b
strongcolor, font, sizestrong color=redRed String/strong
icolor, font, sizei font=serifSerif Italic/i
emcolor, font, sizeem size=12pxSmall Emphasized/em
ucolor, font, sizeu font=serif color=#000Back Serif underlined/u
inscolor, font, sizeinsJust inserted Text/ins
scolor, font, sizesStrikethroughed Text/s
delcolor, font, sizedel size=largerLarger Deleted Text/del
subcolor, font, sizesub color="rgb(0, 255, 0)"Green subscripted Text/sub
supcolor, font, sizesup font=ArialArial Superscripted Text/sup
biglargecolor, font, sizebigBig Text/big
smallcolor, font, sizesmallSmall Text/small
fontfacefont*font=ArialArial Text/fontfont font=TimesTimes Text/font
sizesize*size=20pxBig Text/sizesize size=smallSmall Text/small
colorcolor*color=steelblueSteelBlue Text/colorcolor color=#000Black Text/color
urllinkhref*, targeturlhttps://example.com/urlurl=https://example.com target=_blankCustom Text/url
imgimagesrc*, alt**imghttp://image.url/imgimg=http://image.urlAlt Text/img
mailemailmail*mailinfo@example.com/mailmail=info@example.comCustom Text/mail
codenullcodeAny Code, BB Tags doesn't get parsed in here/code

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.

BBCodeAlt.AttributesNote
h1hnullFirst Header
h2nullSecond Header
h3nullThird Header
h4nullFourth Header
h5nullFifth Header
h6nullSixth Header
hrnullHorizontal Rule, doesn't require an closing tag!
leftnullLeft-Align Paragraph
rightnullRight-Align Paragraph
centernullCenter-Align Paragraph
justifynullJustify-Align Paragraph
quotecite*Blockquote with optional cite.
codeblocklanguage*Codeblock with additional language-classnames.
tablenullAllows: thead, tbody, tfoot and tr
theadnullAllows: trRequires: table
tbodynullAllows: trRequires: table
tfootnullAllows: trRequires: table
trnullAllows: th, tdRequires: table, thead, tbody or tfoot
thalign, valign, colspan, rowspanRequires: tr
tdalign, valign, colspan, rowspanRequires: tr
listultype*Allows: li, *
li*null* doesn't require an closing tag!Required: list, ul or ol
dlnullAllows: dt, dd
dtnullRequires: dl
ddnullRequires: 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)!

BBCodeAttributesNote
addressnullHTML5: Address Block
captionalign*Table CaptionRequires: table
marknullHTML5: Mark some Content
qnullHTML5: Inline Quotation
abbrtitle*Abbreviation
acronymtitle*Acronym
dfntitle*Definition
embedsrc*, width, heightEmbed some Content
audiosrc*, width, height, autoplay, loopHTML5: Embed a Audio Source
videosrc*, width, height, autoplay, loopHTML5: Embed a Video Source
youtubesrc*, width, heightEmbed a YouTube Video, using iframe.
spoilertitle*, closeCreate an Spoiler element

Legende

All Attributes marked with an * can be used inline, for example:
Default:    [bbcode attribute=value][/bbcode]
Inline:     [bbcode=value][/bbode]
0.1.1

7 years ago

0.1.0

7 years ago