Sample page

This is a sample page. Here you can find some examples of the different formatting options and templates offered by the text editor.

You can edit or delete this page.
Please note that you will be able to find back these editing examples and recommandations in your admin menu in section Help › Redator guidelines.

Text Cleanup

System cleanup

First of all, please notice that you are not allowed to insert iframes, scripts or other contents that are not initially provided by the text-editor. The only styles and classes allowed are the ones provided by the editor.

Furthermore, some code cleanup is applied on copy/paste operations that will remove all styles from your source. You will have to re-format all the text. It is done on purpose to get a better respect of the graphic chart, and avoid malicious scripts and codes that would not respect the Femto's usage recommandations.

Your cleanup

If you applied some unwanted styles and you want to remove it, please select your text and use the Clear formatting button above to erase all styles.

 

Titles hierarchy

To create titles, use the Paragraph dropdown and choose the title level you want. You are strongly advised to use titles for it's logical meaning and importance, and not for it's graphic rendering :

  • You can't use Header 1, because it must represent the page main subject, and be unique. It is the field Title that will be used for it.
  • You may use first the Header 2 option, Header 3 then and so on in a logical descending order. Please note that a correct use of these titles will improve your Search Engine Optimization (SEO) and give you a better visibility on the terms appearing in headers. However, don't overuse it. The result would be to drown your keywords instead of beeing performant on the most important ones.

Text styling

Headlines

You can bring out an introduction text by using the formats dropdown above, choosing Text style › Headlines. It applies to the entire paragraph. 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius augue odio, vel tristique tellus sollicitudin ut. Vivamus eu urna arcu. Etiam semper malesuada tincidunt. Donec erat ante, sagittis sit amet dui at, tincidunt molestie augue. Etiam vel arcu nibh. Curabitur tincidunt volutpat nisl, sit amet placerat urna. Duis fringilla a sem non pulvinar. In tempor fringilla lorem a malesuada. Etiam eget ex a mauris ultricies placerat vel in nunc.

Footnotes

Exemple : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras varius augue odio, vel tristique tellus sollicitudin ut.

You can add footnotes by using the formats dropdown above, choosing Text style › Footnotes. It applies to paragraphs or lists.
Combined with Anchor, it can be a nice way to display your footnotes and sources.

  1. Vivamus eu urna arcu. Etiam semper malesuada tincidunt.
  2. Donec erat ante, sagittis sit amet dui at, tincidunt molestie augue.
  3. Etiam vel arcu nibh.

Math formulas

You can insert Math formulas through MathJax codes (similar to laTex). A link to the syntax guidelines is provided in the math popup to help you.

Exemple :

`sum_(i=1)^n i^3=((n(n+1))/2)^2 `

Templates

This editor gets predefined templates to help you to structure your pages. It's available under the icon Insert template : Click on the icon and then select the template you want to use.

Creating columns

Place your cursor where you want to insert the template, then click on the Insert template icon, choose 2 columns or 3 columns in the dropdown and chick on the OK button. Your template is inserted, you just have to insert your texts or images in replacement of the sample text. You can safely remove the titles and replace it with your contents if needed.

Two columns exemple

Maecenas aliquam commodo pretium. Phasellus ut odio ante. Nunc cursus molestie fermentum. Praesent id nulla non urna viverra tincidunt. Morbi vulputate, lorem volutpat ornare gravida, dui dui iaculis diam, sit amet ornare felis eros a ante. Mauris luctus eleifend mauris, et euismod libero consequat eu. In commodo, enim at ornare vestibulum, ante mauris molestie felis, ut scelerisque lectus felis sit amet velit. Maecenas et odio quis leo sodales lacinia.

Second column

Morbi vulputate, lorem volutpat ornare gravida, dui dui iaculis diam, sit amet ornare felis eros a ante. Mauris luctus eleifend mauris, et euismod libero consequat eu. In commodo, enim at ornare vestibulum, ante mauris molestie felis, ut scelerisque lectus felis sit amet velit. Maecenas et odio quis leo sodales lacinia.

First column title

image title

In commodo, enim at ornare vestibulum, ante mauris molestie felis, ut scelerisque lectus felis sit amet velit. Maecenas et odio quis leo sodales lacinia.

Second column title

Maecenas aliquam commodo pretium. Phasellus ut odio ante. Nunc cursus molestie fermentum. Praesent id nulla non urna viverra tincidunt.

Third column title

Phasellus ut odio ante. Nunc cursus molestie fermentum. Mauris luctus eleifend mauris, et euismod libero consequat eu.

 

Special layout elements

Figures

The image caption goes here...

If needed, with the templates you can import a Figure element, that will allow you to display an image with it's legend. A default image is provided by the template, you may replace it with your's then by selecting the image, and editing it's options by clicking on the Insert/Edit image icon.


Framed blocks

Framed blocks have been created to allow you to display an insert in your text, for aside contents, that may be related to your main content, but needs to be displayed separately. It will display in a framed grey block. 

Layout elements width and alignment

Figures and framed blocks are displayed in full width by default, for the case you want to insert a panoramic picture or block.

However, you can choose to reduce their width to 50% or 30% of the main column width, and then place it on the left or on the right.

Width

To change the element width, use the Format dropdown, and select Block size › Column 30%.

Alignment / positioning

Clear

To insert text after a the floating element (at the bottom), you will need to clear the floating : Place your cursor in the paragraph you want to clear, and select Block position › Clear.

 To insert text after the floating element, you will need to clear the floating : Place your cursor in the paragraph you want to display after the floating element, and select Block position › Clear.

To align it on the left or right, use the same Format dropdown and select Block position › Align right.

This type of placement is called floating : The text entered after a floating element will take place around it, until the bottom of it, where it will come back to it's full size.

Importing medias

Images

Use the Insert/Edit image icon to browse your folder on the server, and upload or/then select your image. Click OK, and you image is inserted in the text-editor.

Image sizing

By default, the image is imported in it's real size. To resize your image, select it. Some little squares will appear in the image corners. Click on it to resize your image.
It's recommanded not to scale up to avoid quality loss.

On validation, if you down-sized an image, it will be wrapped with a link to the image on it's original size that will open in a lightbox.

Even if you d'ont resize the image, it will never be displayed bigger than it's container. So if you insert the image in a column, it will resize to fit the column width.

Importing videos

Importing videos is not allowed in the text-editor. To solve this problem, we chose to separate the texts and video insertions. The body field is now an array that can contain several rows that can contain each a text or a video. 

You can add as many rows as you need, and order it as you want by drag and drop. 

To add a new row, just scroll down to the bottom of the body array and click either on the Add rich text nor Add Video button. It will add a new line to fill in.

For video import, go to your video online page, and copy the video URL. Paste it in the video field, and validate. It's done !

Video from external providers only

Video can only be imported from external providers as YouTube or Vimeo for 3 good reasons : 

Format fight

Technology builders disagree on what format to use for reading video on different supports as windows computers, Mac computers, mobiles phones, etc. So actually, to make contents responsive and available on all these supports, 3 different files must be given for the same video. 

Simplicity

The actual text editors and other modules that are allowing video insertion are rarely proposing to insert 3 files for 1 media, and if so, it's not ergonomic at all.

Ressources

Weight : Video files are very heavy. As we need to provide 3 differents files for only one video, the website would require a very powerful server hosting, wich is not necessary for our other needs.
Furthermore, the import of a large file on a server is slow and needs special adaptations to prevent from connections cuts or data losses that may stop the file upload at 97%, after 1 hour waiting... for exemple.

BandWidth : When using external video providers, the bandwidth used by the visitor viewing your video is the provider's one, not the site server one. So even if many people connect at the same time to watch your heavy video, there is far less risks that your server get overloaded and breaks down.

Providers supported

  • Youtube
  • Viméo

What if I don't want to share my video to the entire world ?

Video providers allow you to publish Private videos. It means that your video won't be found on search engines, or even listed on your video channel. Depending on the provider, it will be accessible only to people whoe have the right URL, or have a pasword you gave them, etc. 

Please read the different privacy conditions on the provider's documentation pages : 

We also recommand you to read the documentation of each provider about copyright :