pragmaMx France - Editeur html WYSIWIG SPAW

Nous allons ici nous intéresser à l'éditeur de texte SPAW inclu dans PragmaMx.

Définition (source):
SPAW editor est un remplacement du text area traditionnel par un éditeur plus complet, avec support des CSS, tables, polices et styles. Il supporte aussi le copier / coller depuis les autres applications, et nettoye à la volée le code HTML qui lui est fourni (en provenance de Word, c'est une bonne chose). SPAW editor fonctionne sur Mozilla et Internet explorer. Il est gratuit, sous licence GPL, et payant pour les autres utilisations. Il dispose aussi d'une version francaise, ainsi que d'une version PHP et ASP.

Cet éditeur vous permet de concevoir très facilement des articles, textes ou multiples autres contenus très facilement à la façon de nombreux traitements de textes.
Pour pouvoir profiter de cet outil, vous aurez besoin de l'activer et de le configurer dans votre panneau administration. Je ne vais pas vous détailler les réglages de l'éditeur, ceux-ci étant clairement expliqués dans le panneau administration.

Voici ci-dessous l'aperçu général de l'éditeur.

Nous allons étudier en détail les différentes fonctionnalités.

Traitements de base:

Voici les icones avec leurs descriptions.
Sans grande difficultée, je vous invite à faire des essais pour essayer chacun de ces icones.

Traitements spécifiques:

--> Permet de créer une liste numérotée.

A chaque fois que vous tapez "Enter" sur votre clavier les numéros augmentent.

Titre 1
Titre 2
Etc...

-->Permet de créer une liste à puce.

Comme la liste numérotée mais vous n'avez pas de numéro en début de ligne.

Puce 1
Puce 2
Etc..

-->Permet de créer des liens cliquables dans votre texte.

Plusieurs possibilitées:

URL cliquable: Vous cliquez sur l'icone et vous indiquez l'url du lien. Exemple: http://www.pragmamx.fr

Note:
Self = Ouverture du lien dans la page courante.
Blanck= Ouverture du lien dans une nouvelle page.

Texte cliquable: Vous sélectionnez (Clic gauche en restant appuyé) une partie de votre texte qui servira de lien, puis vous cliquez sur l'icone et indiquez l'url du lien. Exemple: Notre site

-->Permet d'illustrer votre texte avec des images.

Lorsque vous cliquez sur cet icone une nouvelle fenêtre s'ouvre.

Bibliothèque: Smilies ou Mx-Uploads si vous avez autorisé l'upload d'images pour celui qui écrit le texte.
Les images envoyées seront placées dans le répertoire choisi dans l'administration de l'éditeur
(images/iupload)par défaut. Ce répertoire doit être CHMODé en 777 pour autoriser l'envoi.

Une fois votre image envoyée sur le serveur, vous pouvez la prévisualiser et ensuite la sélectionner pour votre
texte.

Pour rendre une image cliquable sous forme de lien.

Une fois que vous avez placé votre image dans votre texte, faire un clic gauche sur l'image (pour la sélectionner) puis cliquez sur l'icone

vu précédement.

Exemple d'image cliquable:

Pour écrire du texte à coté de l'image.

Comme vous avez surement remarqué, quand vous placez une image, l'ajout de texte se fait en dessous ou au dessus de l'image.
Voici comment profiter de tout l'espace.
--> Faire un clic gauche sur votre image (pour la sélectionner) puis cliquez sur cet icone

qui sera "dégrisé".

Vous aurez ainsi accès aux propriétés de l'image.

Si vous sélectionnez gauche, vous pouvez écrire du texte à droite,
comme ici :-)

Vous pouvez également créer des bordures ou redimensionner l'image.
Pour vous familiariser avec les propriétés, je vous invite à faire des
essais pour le reste des options.

Pour une image Pop-Up

Sélectionner votre image ou une partie de votre texte (Comme pour les liens) et cliquez sur l'icone popup image

choississez ensuite l'image qui s'affichera en pop-up.

Exemple pour une image (Cliquez sur celle-ci):

Exemple pour du texte: Cliquez ici

-->Pour ajouter une ligne transversale

Exemple: Ligne ci-dessous

-->Pour ajouter un tableau

Cliquez sur cet icone et une nouvelle fenêtre s'ouvrira.

Comme les propriétés des images, je vous invite à faire différents essais pour créer des
tableaux.
Il n'y a pas de problème particulier pour les propriétés des tableaux, les champs à
renseigner étant eux-mêmes explicites.

Ci-dessous, un exemple de tableau:

Modifier le tableau.

Comme les images, vous pouvez revenir sur les paramêtres et modifier les propriétés de votre tableau.
--> Clic gauche sur votre tableau (Pour le sélectionner) puis cliquez sur cette icone

qui sera alors "dégrisé"

Modifier les cellules.

De même, vous pouvez modifier chaque cellule de votre tableau.
--> Clic dans la cellule à modifier, puis cliquez sur

qui sera aussi "dégrisé",vous aurrez accès à une nouvelle fenêtre des propriétés pour les cellules.

Il n'y a pas de problème particulier pour les propriétés des cellules, les champs à
renseigner étant eux-mêmes explicites.

Passons maintenant à la dernière rangée d'options de l'éditeur:

Style: Liste défilante pour appliquer un style précis faisant référence à votre fichier style.css
Police: Comme son nom l'indique, si vous voulez appliquer une police spécifique
Taille: Pour définir la taille de vos caractères
Paragraphe: Pour définir la taille de vos paragraphes

Remarques diverses:

- Concernant le style appliqué au texte, sachez que c'est votre fichier style.css qui prédomine lors de la mise en forme des pages.

- En bas de l'éditeur, vous avez deux onglet "Design" et "Html" en cliquant sur l'un ou l'autre vous passez en mode création ou code. Ainsi, si vous préférez utiliser un autre éditeur, vous avez juste à coller votre code en "Html".

-Spaw à son propre fichier css (spaw/wysiwyg.css) pour la zone de création des messages. Vous pouvez ainsi modifier ce fichier pour l'adapter à votre thème. Exemple: Un fond d'une couleur différente.

-Vous pouvez fusionner l'éditeur dans vos propres modules ---> Documentation ici

PragmaMx | France

Editeur html WYSIWIG SPAW