Première partie : ce qu'il est possible de faire avec l'éditeur en mode visuel

Titre1

Paragraphe par défaut (cadré à gauche). Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.

Titre2

Paragraphe

Titre3

Paragraphe

Titre4

Paragraphe

Titre5

Paragraphe

Titre6

Un bloc de citation. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.

Paragraphe avec
passage à la ligne.

Texte sans format,
sur deux lignes.

Paragraphe

Du texte préformaté.

Ceci est un paragraphe avec des mots en gras, italique, souligné, barré, une citation en ligne, du code. Ceci est un lien externe qui s'ouvrira dans la présente fenêtre, suivi d'un lien interne vers un billet, suivi d'un lien transformant le mot en mot-clé : Publication.

Voici une liste à puces :

  • item1
  • item2
  • item3

Voici une liste numérotée :

  1. item1
  2. item2
  3. item3

Image locale (recadrée en carré), contenant un lien vers l'image complète,

Une image (miniature) positionnée à gauche du texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.

Une image (de taille moyenne) centrée. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.

Une image (petite) positionnée à droite du texte. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor.

Liens vers des fichiers téléversés dans le gestionnaire de médias

Document

Lien vers un fichier PDF local Schéma de l'écosystème informatique

Audio

Lien vers un fichier audio local Ogg_Vorbis_Audio.ogg

Vidéo (non reconnu)

Lien vers un fichier vidéo local WebM_VP8_Video.webm (hélas ce fichier n'est pas reconnu en tant que vidéo, mais vous pouvez néanmoins le télécharger)

Lien vers des fichiers externes

Vidéo

Lien vers un fichier partagé sur OwnCloud Ogg_Theora_Video.ogv

Seconde partie : ce que l'on peut faire de plus avec l'éditeur en mode source

Prenez soin de régler le paramètre du format du texte par défaut à "xhtml".

En mode source vous pouvez directement coller des bouts de code HTML. Vous pourrez donc avoir du texte inséré, en couleur, dans différentes tailles, en Petites Capitales, etc. des listes imbriquées, des listes de définition, des tableaux, etc.

Tutoriel pour insérer un tableau

Si vous avez à réaliser un tableau complexe (avec des cellules fusionnées, des couleurs de fond, etc.), écrire directement le code HTML sera assez difficile... Il faut mieux créer le tableau dans un logiciel puis le copier dans l'éditeur de DotClear.

Attention : ne laissez pas de cellule vide (mettez-y au moins un espace ou un tiret).

Solution 1 : vous utilisez un éditeur HTML en mode visuel WYSIWYG (comme par exemple BlueFish)

Il vous suffit de copier le code HTML généré par le logiciel et de le coller dans l'éditeur de DotClear (en mode source).
Si le résultat n'est pas satisfaisant voir au § suivant les corrections à effectuer.

Solution 2 : vous utilisez un logiciel de traitement de texte (comme LibreOffice Writer).

Si le tableau est simple et sans couleurs, copiez-le et collez-le dans l'éditeur de DotClear (en mode visuel). Ensuite basculez en mode source pour effectuer les corrections de mise en forme souhaitées.
Par exemple, définir les espacement et bordures de cellules, la largeur du tableau : <table cellspacing="0" cellpadding="2" border="1" width="100%">

Si le tableau est complexe ou contient de la couleur, enregistrez le document Writer au format "Document HTML" (via le menu "enregistrer sous" - pas via le menu exporter).
Ensuite vous allez devoir effectuer des corrections du code HTML. Pour cela ouvrez le document résultant dans un simple éditeur de texte (comme gedit ou Notepad++).
Dans cet éditeur rechercher et remplacer le code correspondant à la mise en couleur du texte <font color="#ff0000">texte</font> (l'éditeur de DotClear élimine les balises <font>), par :

  • pour du texte : <p style="color:#ff0000">votre texte en rouge</p> ;
  • pour la couleur de fond d'une cellule : <td bgcolor="#00ff00"><p>votre texte sur fond vert</p></td>.
  • Vous pouvez aussi supprimer des éléments inutiles (formatage des cellules : style="...") ou inappropriés (largeur de colonne fixe : <col width="85*"> et autres indications de largeur : width="25%"; alignement du texte : valign="top")

Enfin copiez le code HTML corrigé et collez-le dans l'éditeur de DotClear en mode source.

Exemple : code issu de Writer, avant correction :

rouge

vert

bleu

fond rouge

fond bleu

surlignage vert

Après corrections du code et ajustements de mise en forme :

rouge

vert

bleu

fond rouge

fond bleu

surlignage vert

 

Incorporation de médias

Important : lors de l'insertion d'un bloc <iframe> prenez garde à insérer au moins un caractère juste avant la balise fermante </iframe>, sinon Dotclear supprime le code.

Voici une carte OpenStreetMap (balise <iframe> 425 x 350) :


Afficher une carte plus grande

Voici un album photo public hébergé chez zaclys.com :

cliquer ici
album de test

Voici un fichier audio (local) embarqué (balise <audio>) :

(hélas, la balise audio n'est pas respectée par Dotclear)

Voici un fichier vidéo (local) embarqué (balise <video>) :

(hélas, la balise video n'est pas respectée par Dotclear)

Voici des fichiers vidéos embarqués à l'aide de la balise <iframe> :

depuis Framatube (400 x 225) :

depuis Youtube (100% x 360) :

Source d'origine : framatube.org

Note : si on inclue directement un fichier hébergé ailleurs dans une balise <iframe>, il est automatiquement proposé au téléchargement / ouverture lors du chargement de la page : pas très intéressant.


mise à jour : 15 août 2017