BBComposer : Manual

Manual

This manual allows you to take the control of the BBComposer's features.

Introduction
Semantic functions (XHTML)
Stylistic functions (CSS)
Options
Developers

I. Introduction

The BBComposer allows an intuitive edition of XBBCodes, XHTML, Mediawiki syntax and BBCodes. To activate the editor, go on a web page containing a form with a multi line field (textarea). At this place, right-click in the field you want to edit, select BBComposer and select a language.

A new tab opens or the multi line field disappears (according to the preferences chosen in the options). You can now edit the content. Once the edition is finished, you'll have to click on the edition mode button in order to return to the normal form and to submit him.

II. Semantic functions

Kilometer typing

The first functionality of the BBComposer is to enable you to edit the contents of your Internet website. It is the first stage. Indeed, we advise you to format the document only in a second time and to start typing all the text. Note that the enter key creates a new paragraph and the shift + enter keys creates a new line.

You will see that the text you type is formatted differently than on your own website. Don't worry, once the modifications will be saved, it will take the look of your site.

Block qualification

For the moment, all of the text is in paragraphs blocks. However, a text is much more complex than that, it can contain titles or lists. To add this type of blocks, two solutions are offered to you :

The first, to select a block (for the moment, all the blocks are paragraphs), and to transform it into a block of your choice with the tool bar. You can add titles (2, 3, 4, 5, 6) or lists (ordered lists, unordered lists or definition lists).
The second, is to make sure that no block is selected and to choose a type of block. It will appear at the end of your document.

To navigate through the different blocs of the editor, you can use control + up and control + down.

Improve text quality

Some buttons allow you to add semantic in the content of the document. You must select the text and click on one of the buttons of the tool bar :

Strong, emphasis: It means that sentence or word is important. Emphases is marking a simple emphasis and strong a stronger importance.
Quotation: Is used to insert a quotation.; Example: How are you?
Reference: To quote an author or a work.; Example: The Perfume of Patrick Süskind.
Acronym: Use it when you wish to show the significance of initials. Example: CIA.
Abbreviation: An abbreviation which cannot be marked as an acronym.; Example: Are u there ?
The interest of this valorization is that it makes it possible to specify robots the word is an abbreviation and not a mistake which could cause a decrease of your website popularity.
Exponent and indices: As their name indicates it, they make it possible to put a text in subscript or sup script.; Examples: The sum of the terms of an arithmetic suit at the row N is: One = U₀ + Q x N The derivative of xⁿ is nx^n-1.
Keyboard: Allows to mark a text that should be type on the keyboard.
Example: To validate the form, click on Enter.
Variable: To mark a word as being a variable of a program.
Removed: Means the text ~~has been removed~~.
Anchor: This button is used to give a name to a part of the document. For example, this link points towards the title of this definition. To create it, I added an anchor named anchor to the title, and in the link, I entered this address #anchor. It's very useful for a menu like in this manual.
Link: This button makes it possible to create a link towards another site. Be careful to enters the good address of the site ! It is better to check it and copy/paste it.
Images: Allows the insertion of an image in your site. Do not forget to fill the alternate text which allows the people who do not have the possibility of seeing it (mobile Web, visual handicapped people…) to understand what it contains.

Cancellation

To cancel a semantic qualification, simply place the cursor on the text you want and click on corresponding button to make it disappear. You can see the selected tag in the status bar.

III. Stylistic functions

BBComposer also allows to publish a document in a stylistic way with the CSS. A side bar is available in Tools>CSS. Do not forget to select the element that you wish to modify before making modifications and to click on Apply to make them effective.

Texts

Caution! These styles should not replace the use of the semantic buttons!

Color

You can choose a color for the text. Red, for example!

Font

You can choose a different font. Verdana, for example, is available on many systems.

Size

Give a size to a text. The size can be defined in several different units: em, px, %, pt... O.9em for example.

Thickness

The thickness of your texts. Unfortunately, Internet Explorer do not supports it correctly...

Style

A text in italic in a click. The oblique does not function on all the navigators.

Decoration

You can choose a decoration for your texts, underlined for example.

Transformation

You can transform the letters of a text. All in capital letter!

Extension

This property is useless because no navigator recognizes it for the moment.

Alternative

Allows to create an effect like small capital letters for the texts.

Alignment

To center a text, for example!

They are parameters of advanced edition you will never use. Jump this part of the manual is you haven't enought time.

Size adjustment

Allows to define a coefficient for of size-like font, if the font is not available, it is replaced by another of the same type.

Line height

As its name indicates, this style allows to adjust the line height.

Text indentation

The value of 150px is useful to illustrate tis style, but it's not very beautiful…

Words spacing

Size of space between each word.

Letter spacing

Same thing, between each letter.

White spaces

White spaces mode.

Shadow

Allows to create a shadow effect on words, but it isn't supported yet by some navigators.

Direction and bidirectional orientation

Properties relating to certain languages like Arabic.

Padding and margins

These values can be in px and %.

Margin

It defines the margin between the border of the block and its contents. Here, it is 1px everywhere!

Padding

Even thing than higher, but outside the border. Here, it is 10% on the left and on the right.

Appearance

Sets differents looks for blocks.

Background

Change the color of backgrounds and see the life in pink!

Border

A sympathic boder can be created by mixing all the possible options. Certain styles of borders are not supported by Internet Explorer 6…

IV. Options

The options enable you to adapt BBComposer to your taste.

General options

Address of your Internet website: This option is explicit, the utility to inform it is for relative directories and file upload.
Navigation: You can choose the destination of the links opened by BBComposer, such as for example, the page of validation.

Toolbar

Always show the tool bar: If you uncheck this option, the bar of tool will be posted only in edition mode.
Enters edit mode automatically: This option allows BBComposer to enter in edition mode by detecting fields.
Remember selected textarea: If you select this option, you will not have to click right to enter again in edition mode. The button edition mode of the tool bar will be sufficient.
Editor target: You can choose to edit the contents in the form or in a new tab.

Editor

Addresses of the editor: There are local and distant addresses used by the editor. By clicking on always using the local address, you'll force BBComposer to use the local address (confidentiality). Nevertheless, the edition directly in the form does not allows to use a local address (Firefox security alert).
Dimensions of the editor: This option is used to specify the size of the editor when it is on the form.

Language

Default language of edition: As its name indicates it, this option makes it possible to choose the language used by default. You can choose to always return to this language by unselecting the option remember the selected language.
Options of the XHTML: You can choose to indent the XHTML. For the moment, this option does not function perfectly yet. On the other hand, the creation of HTML entities for the non ASCII characters functions perfectly.

Advanced

Auto save delay: This option is currently inoperative.
ID of the field of text to be published: It is a question of the ID of fields to be recognized for the automatic control.
Default contents of the editor: The default contents must be in HTML. It can be empty if you wish it.

V. Developers

You can use BBComposer for your sites, with this intention, you can make some adaptations.

Identify the fields containing BBCodes

BBComposer needs a reference to handle the multi line fields. That's why you should alway give a value to the attribute “id” of you textareas. BBComposer allows also the automatic switch in edition mode. For that, it is necessary to give to the attribute “id”, the value “fcontain”.

XBBCODES, an necessary evolution

Treat XBBCodes for posting

The major asset of BBComposer is to create semantically correct code. Unfortunately, the use of traditional BBCodes or Wiki syntax does not make it possible to benefit of this advantage. That's why we recommend to you to pass to XBBCodes. To help you to treat this language, we put in self-service the function PHP used by XCMS.

With any CMS:
You must use the function downloaded above to interpret XBBCodes who will be transformed into XHTML. In PHP, that will seems like that:
<? php
$xhtml = format_contain ($xbbcode);
?>

With SPIP:
It is necessary to add a new filter. You initially must, to modify your files skeletons. For example, for an article:
< (#TEXTE*|format_contain) >
The star is used to cancel the Spip treatment and format_contain is the name of the function to be used. To be able to use it, we must add it in Spip. For that, download this file and record it in Spip in the root directory of the site or where your skeletons are stored:

Versions minor than SPIP 1.9: mes_fonctions.php3
Versions higher than SPIP 1.9: mes_fonctions.php

Convert traditional BBCodes into XBBCodes

In order to facilitate your passage to XBBCodes, we took as a starting point an existing function to provide you a function allowing to carry out the convertion.

Do not hesitate to propose more powerful alternatives than those functions and we will be glad to publish them here.

Developments

To improve the BBComposer, we are currently considering to developp other functions. Every help will be appreciate.