Tag: bbCodeWebEx

bbCode for Web Extensions (bbCodeWebEx) Version 0.3.0 Released

I have updated my Firefox addon, bbCode for Web Extensions (bbCodeWebEx), to revision 0.3.0.

Just to remind you, it adds a context menu to automate bbCode and HTML coding for blogging, discussion boards, and the like.

The new version was driven by the fact that the indescribably awful update to the Blogspot editor broke it.

In addition to that fix, there have been some updates:

I have also added the following:

  • Color picker for fonts in HTML and XHTML.
  • Added a new line token ( ~_~nl~_~) to allow users to make multi-line custom tags.

At some point, I’ll look into porting it to Chrome, which uses a similar technology for its add-ons, because it appears that senior Mozilla management is hell-bent killing off Firefox through stupid management tricks like, abandoning their core expertise for the latest shiny object, destroying their internal knowledge base, and looting the organization through excessive pay and benefits for senior management.

Light Posting for a While

If You Miss an Opportunity to Reference The Princess Bride, You’ll Be Gleeped by the Todal

Google Blogger has updated,and they have broken my Firefox addon, bbCode for Web Extensions (bbCodeWebEx).

Between that and work, and a desperate need to avoid dealing with the impending sense of dread over the upcoming election, I’m swamped.

I have an app to fix, my country’s 500th anniversary to plan, my wedding to arrange, some fleas to murder, and Guilder to frame for it. I’m swamped!

Disclaimer: I am not going to war with Guilder this week, but you know, The Princess Bride.

I Have Released a My First Ever Piece of Software

When the Firefox browser was updated from 56 to 57 (Quantum) the previous browser addon technologies (XUL/XPCOM) were obsoleted and replaced with the (less powerful) Web Extensions API.

One that I could not live without was BBCodeXtra, which provided a context menu which allowed various tags in bbCode, vBulletin, Markdown, and HTML to be automated, along with users to create custom tags.

Right now, it is largely a copy of the menu structure of BBCodeXtra.

(on edit) I now have the program up on the releases page at gitHub.

As soon as this is on addons.mozilla.org, I will post the link to that here. 

I have not formally put it in the Mozilla Addons, because it is still at a preliminary state, basically alpha.

The code is released  under an MIT open source license, and you can find the source code on Github as bbCodeWebEx.

The icons are NOT under the MIT License, having been done by by Charles Saroff, and he holds the copyright under a yet as to be determined license.

While this will work with pre-Quantum (Firefox 56 and earlier) versions of the browser, the clipboard functionality does not work.

I should warn you that this is some of the ugliest JavaScript in the known world, and perusing it may lead to all sorts of physical and mental problems.

bbCodeWebEx Quick Start Guide

(click on any image to see a larger popup)

When you right click on text in a text box, it provides a context menu that allows you to apply formatting in bbCode, vBulletin, HTML, XHTML, Markdown, and user defined (custom) tags.

As you can see, I have not yet figured out how to create a color wheel for font color, so it’s just a sub menu. (I’m working on it)

The settings page allows you to activate or deactivate menus.

You simply select or deselect the check boxes, and then click “save menu options.”

Since vBulletin is a superset of bbCode, the vBulletin menu is a submenu of bbCode menu, and if you deactivate bbCode, you deactivate vbulletin as well.

Custom Tags
If you click on the “custom tags” button, the custom tags page will popup, either as a new tab or as a window depending on your browser settings.

You can re order the tags by dragging and dropping the rows, but you cannot drag anything to the bottom row. You must drag to the 2nd row from the bottom, and then drag the bottom row up. (I’m working on it)

Once you have finished, click the “Save Tag Order” button.

To edit a tag, click, select a tag from the list, and it will populate the input boxes at the bottom of the page.

Make any changes you might want to the Menu Title and Menu Argument input boxes, and then click “Save Custom Tag”, and it will be updated in the list.

The two simplest, and most commonly used, tokens for making an argument to be used in a menu are are: (Other, more complex, tags, are described in the detailed documentation)

  • {{selection}}
  • {{clipboard}}

An example of the use of selection would be

<b><span style=”font-size: 100%; font-variant: small-caps;”>{{selection}}</span></b>

which makes the selected text bold and small caps.

An example of the use of clipboard would be:

<img src="{{clipboard}}">

Which takes the content of the clipboard, and pastes it into the html code for an image.

If you want to delete a tag, click on it, and it will populate the input boxes at the bottom of the page.

When you click the delete button, you will be asked to confirm, and then the custom tag will be deleted.

To create a tag, click on the “New Tag” button, and the “Menu ID” input box (you cannot change this value), and the “Parent Menu” input boxes will be filled in. (you cannot change this value either)

Enter a title for the sub menu and an argument, and then click “Save Custom Tag”, and it will be added to the bottom of the list.

To export your custom tags, click on the “Export Settings…” button, and you will be warned that things like unsaved new and edited tags will be deleted. If you are OK with that, click OK, and save the file, which will have the name “bbCode_WebEx_YYYY-MM-DD.json” will be saved to disk.

To import your custom tags, click on the “Import Settings…” button. You will be asked to confirm, because this will erase your existing tags, (Back up first) and then you can use your file dialog box to load a file.

Export and import files must/will be JSON array file format.

bbCodeWebEx Custom Tags & Advanced Use

Available codes:

(Note: these are case sensitive, and they can be used multiple times in a single menu.)

  • {{clipboard}}: This pastes in the current clipboard contents where it is placed.
  • {{selection}}: This pastes in the currently selected texts where it is placed.

Example: [url={{clipboard}}]{{selection}}[/url]
So if you copy a url, and select text, this would add a link to it for bbCode, and around the code words are double curly braces, “{}“.

Here is an example of using the tag more than once.

This right justifies an image, sizes it to 200 pixels wide, and adds a link to the fullsize image that pops up in blogger:

<a href="{{clipboard}}"><img src="{{clipboard}}" style="margin: 0px 0px 10px 10px; float: right; cursor: pointer;" width="200"></a>

Nice picture, huh?

Don’t hate me because I’m beautiful.

JSON array format:

It is basically a text format (UTF-8 character set) that this extension uses to externally save data.

Here are the first three standard custom tags that come with the extension.

Note that the last one does NOT have a comma after the closing curly brace.

Theoretically, you could manually edit these, and if you wanted to combine two sets of custom tags, you could with a cut and paste, making sure that all of the closing closing braces are followed by a comma, except for the last one.

"menuId": "bbcwbx.custom.001",
"menuTitle": "First custom menu",
"parentId": "bbcwbx.custom",
"menuArg": "Arg 1",
"icons": ""
"menuId": "bbcwbx.custom.002",
"menuTitle": "Second custom menu",
"parentId": "bbcwbx.custom",
"menuArg": "Arg 2",
"icons": ""
"menuId": "bbcwbx.custom.003",
"menuTitle": "Third custom menu",
"parentId": "bbcwbx.custom",
"menuArg": "Arg 3",
"icons": ""

The indents and the new lines here just for readability.