You are there: > Manual

Manual

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

  1. Introduction
  2. Semantic functions (XHTML)
  3. Stylistic functions (CSS)
  4. Options
  5. 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 xn is nxn-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!

More

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

CSS stylesheet
This option allows you to use a custom css stylesheet to edit your contents.
Enters edit mode automatically
This option allows BBComposer to enter in edition mode by detecting fields.

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.

Upload

Those options allows BBComposer to upload local files to the server. The user is supposed to be logged in on the server and the authentification must be done with cookies (session).

When you add a local image to the editor, bbcomposer try to upload it to the server. A POST request is sent to the following url : download site/download address. The file is sent into a field named Name of the file fields. Some additionnal POST parameters can be added in POST parameters (ex: param1=value1&param2=value2).

To be sure that no file will be erased, check Unique file name.

Response

To understand the server response, you must configure BBComposer. The first thing is to tell what kind of response is attempted (XML or Text). Is XML is selecter the markers are the name of the XML tags in wich the values are. In case of text response, markers are regular expression that returns the wanted value.

Advanced

Auto save delay
This option is currently inoperative.
Default contents of the editor
The default contents must be in HTML. It can be empty if you wish it.

Fields

The list of fields that have been saved by BBComposer with the "Edit and save" shortcut in the context menu.

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.