Aller au contenu

Un éditeur de texte riche


Gytha_Ogg

Sujets conseillés

Bonjour à tous,

Je poste ici car je ne sais pas trop où le faire, donc toutes mes excuses anticipées aux modérateurs, car je suppose que ce message devra être déplacé.

Voici mon problème : je suis à la recherche d'un éditeur de texte riche pour l'un de nos sites, et j'ai l'impression de m'être embarquée dans une quête du Graal...

Mon principal problème est que je suis nulle de chez nulle en Javascript (rien que le mot me donne des sueurs froides), donc je me suis paumée dans les usines à gaz de FCKEditor et TinyMCE... J'ai failli retenir Xenhia jusqu'à ce que je constate son fonctionnement erratique sous Opera (et il a l'air abandonné). J'ai constaté que Markupeditor ne convenait pas (balises visibles en direct), Wyme non plus (très bien, mais pas pour l'usage que je cherche).

Je ne demande pourtant pas l'impossible (enfin, je le croyais)... Je recherche cet éditeur pour un site destiné aux associations. Le but est de leur permettre de rentrer du texte avec gras, souligné, couleur, italique, police de caractères plus ou moins grande, centré, cadré à gauche, à droite, etc. Rien que de très basique, donc. Compte tenu du public visé, il faut que l'usage soit simple (non que les utilisateurs soient bêtes, mais la plupart ne connaissent strictement rien au HTML et encore moins aux CSS), que l'on soit protégés contre la soupe de balises, contre l'injection de code malveillant, il faut que l'ensemble soit en français et, très important, qu'il y ait un compteur de caractères.

J'ai donc testé un certain nombre d'éditeurs et pour l'instant, je ne vois que FCKEditor qui fasse à peu près ce que je souhaite, si ce n'est que je ne suis même pas capable d'intégrer un plugin de comptage de caractères.

Pour information, je programme habituellement en PHP.

J'avoue que je suis un peu découragée, et si quelqu'un a des conseils ou des suggestions pertinentes, je le remercie par avance !

Lien vers le commentaire
Partager sur d’autres sites

Je viens de déplacer le sujet dans la section appropriée.

Personnellement, j'utilise TinyMCE, mais j'avoue ne jamais avoir regardé si on pouvait limiter les caractères. Ceci dit, tu vas forcément devoir mettre les mains dans le cambouis à un moment ou à un autre.

Pour finir, rien à voir mais j'adore ton pseudo !

Lien vers le commentaire
Partager sur d’autres sites

Je viens de déplacer le sujet dans la section appropriée.

Merci !

Personnellement, j'utilise TinyMCE, mais j'avoue ne jamais avoir regardé si on pouvait limiter les caractères. Ceci dit, tu vas forcément devoir mettre les mains dans le cambouis à un moment ou à un autre.

C'est certain ! Pour ce qui est de TinyMCE, j'ai cru comprendre qu'il n'existait pas encore de plugin de comptage de caractères.

Pour finir, rien à voir mais j'adore ton pseudo !

Hé hé, ravie de voir qu'il y a un ou des pratchettophiles par ici !

Lien vers le commentaire
Partager sur d’autres sites

Mais oui on peut compter les caractères sur tiny:

/**
* Return the "clean-text" length of the edited text in the tinyMCE
* @param editorId
*/
function getLengthMCE(editorId) {

// Get the editor instance that we want to interact with.
var oEditor = tinyMCE.get(editorId);

// Get the Editor Area DOM (Document object).
var oDOM = oEditor.getDoc();

var iLength;
// The are two diffent ways to get the text (without HTML markups).
// It is browser specific.
if (document.all) {
// If Internet Explorer.
iLength = oDOM.body.innerText.length;
} else {
// If Gecko.
var r = oDOM.createRange();
r.selectNodeContents(oDOM.body);
iLength = r.toString().length;
}

return iLength;
}

source : http://tinymce.moxiecode.com/punbb/viewtopic.php?id=919 le 12ième commentaire

Lien vers le commentaire
Partager sur d’autres sites

J'utilise également Tinymce.

Les éditeurs de textes disposent de fonctionnalités plus ou moins évoluées qui s'exécutent sur le poste client.

Quels que soient les vérifications de sécurité mises en place en js, tout peut évidemment être désactivé à volonté->il faut traiter les données coté serveur (php dans ton cas) afin de sécuriser tout ce qui rentre.

Pour obtenir un compteur de mots/caractères, va voir làhttp://tinymce.moxiecode.com/punbb/viewtopic.php?id=1922

(à la fin du post)

Attentions aux scripts un peu trop anciens, certaines fonctions sont "deprecated" (e.g: tinyMCE.getContent dans la version3)

Lien vers le commentaire
Partager sur d’autres sites

Moi je suis toujours avec Notepadd++ mais j'avoue avoir jamais essayé Tinymce...

Ce que j'aime bien avec Notepad++ c'est qu'on peut se synchroniser sur son serveur avec un plugin FTP intégré ;)

De plus, il me semble qu'il garde un backup local des fichiers dans le répertoire ou se situe le plugin :)

Lien vers le commentaire
Partager sur d’autres sites

Gecko64 tu es hors course, on parle d'un éditeur wysiwyg pour intégrer dans une interface d'admin, on va pas demander à l'utilisateur lambda d'utiliser notepad

Lien vers le commentaire
Partager sur d’autres sites

Pareil que beaucoup dans ce fil : j'utilise TinyMCE avec un bon validateur derriere pour securise le texte envoyer (PHP maison).

Le seul truc auquel il faut faire gaffe au debut, c'est aux balises generees par TinyMCE. Par example, au lieu d'un <b>, il prefere le <strong> mais sinon, que du bonheur ...

Lien vers le commentaire
Partager sur d’autres sites

Pour le sémantique le <strong> mais pour la simple mise en forme le <b> est fais pour ça.

C'est quoi mettre en gras un texte, ce n'est pas lui donner de l'importance?? donc <strong> est bien le mieux adapté, <b> est une balise désuète et délaissé par tous les éditeurs wysiwyg (ou presque)

Lien vers le commentaire
Partager sur d’autres sites

Oula, je ne voulais pas lancer un debat sur les pro <b> contre les pro <strong>.

La seule chose que je voulais dire c'est qu'il faut faire gaffe dans le code de validation des textes envoyer et bien verifier le code effectivement creer.

Lien vers le commentaire
Partager sur d’autres sites

Je ne suis n'y pro <b> ni pro <strong> :lol:

Pour être plus clair leur aspect est le même mais il y a une différence :

<b> indique simplement au navigateur de mettre en gras (ce n'est pas sémantique mais de l'esthétique)

<strong> idem + une ajoute une valeur sémantique (sens au texte) sur le terme mis en gras

Et c'est pareil pour les <i> et <em>.

Les synthétiseurs vocaux hausse la voix quand ils trouvent un strong ou un em et non pas b et i qui relèvent uniquement de l'esthétique.

certains navigateurs texte font aussi la différence.

Lien vers le commentaire
Partager sur d’autres sites

Tout d'abord, merci à tous pour vos réponses. Il semble donc que je doive me replonger dans TinyMCE...

Effectivement, ce que je recherche c'est un éditeur WYSIWYG pour un utilisateur lambda. Pour ma part, j'utilise Notepad++ pour programmer, mais ça n'a rien à voir avec le schmilblick qui m'embête ces temps-ci :P

Pour ce qui est du comptage de caractères, je suis obligée de compter tout, y compris le code HTML et pas seulement le texte brut entré par l'utilisateur, car c'est ce qui est sauvegardé dans ma base de données et les champs concernés ont une longueur importante mais limitée : je ne peux pas me permettre de perdre des bouts de balises en route !

Lien vers le commentaire
Partager sur d’autres sites

As-tu la possibilité de mettre ton champ SQL en type "text" ? Peut être que ton problème serait arrangé.

Pour éviter les abus un petit comptage de caractère en PHP.

Lien vers le commentaire
Partager sur d’autres sites

<b> indique simplement au navigateur de mettre en gras (ce n'est pas sémantique mais de l'esthétique)

Bon mais a partir du moment ou tu met un texte en gras, c'est que tu veux le faire ressortir, donc lui donner de l'importance non????

Lien vers le commentaire
Partager sur d’autres sites

Oui bien sûr, importance "esthétique" ou importance esthétique + sémantique.

Mais bon c'est un peu de la masturbation entretenu par les normes.

Lien vers le commentaire
Partager sur d’autres sites

Disons que si tu souhaites que les malvoyants sentent l'emphase, la mise en gras est nécessaire. Dans le cas contraire, elle n'est pas utile sémantiquement parlant, et il faudra sans doute l'obtenir différemment (via les CSS, par exemple).

Lien vers le commentaire
Partager sur d’autres sites

Exact, CSS ou les équivalents non sémantique (<b> et <i>) n'ont normalement aucun effet dans l'appui de la phrase des logiciels pour mal voyant. Dans les réglages par défaut du moins.

Lien vers le commentaire
Partager sur d’autres sites

Bon mais a partir du moment ou tu met un texte en gras, c'est que tu veux le faire ressortir, donc lui donner de l'importance non????

Non. Parfois, pour les besoin de design, on met par exemple la première lettre en gras et le reste des lettres du mot en normal. Dans ce cas, le gras doit être fait avec font-weight du CSS (séparer la mise en forme de la structure, donc ne pas utiliser B). Utiliser la balise strong pour décorer son texte n'a également aucun sens dans la mesure où strong c'est utilisé pour accorder de l'importance à l'expression ciblée.

Je soutiens donc Occi! :)

Bref, je m'excuse pour ce hors-sujet.

Sinon, comme RTE, j'ai récemment découvert un, Nicedit, super sympa, super modulable et particulièrement léger! Pas mal au niveau des options. Il faut par contre installer le plugin "XHTML Valid" pour que la bête produise un code plus ou moins valide.

Lien vers le commentaire
Partager sur d’autres sites

As-tu la possibilité de mettre ton champ SQL en type "text" ? Peut être que ton problème serait arrangé.

Pour éviter les abus un petit comptage de caractère en PHP.

Les champs en question sont déjà de type text. Un comptage de caractères en PHP est nécessaire avant l'insertion des données dans la table, mais il n'empêche que pour le confort des utilisateurs, j'ai (malheureusement) besoin d'un compteur de caractères...

Lien vers le commentaire
Partager sur d’autres sites

Sinon, comme RTE, j'ai récemment découvert un, Nicedit, super sympa, super modulable et particulièrement léger! Pas mal au niveau des options. Il faut par contre installer le plugin "XHTML Valid" pour que la bête produise un code plus ou moins valide.

Je viens donc de tenter un test de Nicedit. J'ai transposé à mon exemple de base le fichier de démo n°1, ce qui donne donc :

<?
session_start();
echo '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head><title>Calendrier-annuaire de la vie associative locale</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-15">
<style type="text/css">
BODY { background: #BBEFFF; color: navy; font-family: Optimum,Helvetica,Verdana,sans-serif; font-size: medium; width: 80%; margin: auto; text-align: center;}
</style>
</head>
<body>
<h1>Test d\'éditeur WYSIWYG</h1>
<script type="text/javascript" src="../NicEdit/nicEdit.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
<form action="voirtest.php" method="post" target="_blank">
<textarea name="descrtemp1" rows="10" cols="100" width="100%">'.$_SESSION['descrtemp1'].'</textarea>
<textarea name="descrtemp2" rows="10" cols="100" width="100%">'.$_SESSION['descrtemp2'].'</textarea>
<br>
<input type="image" name="submit" src="images/visu.gif" align="middle" alt="Visualiser">
</form>
</body></html>';
?>

Le moins qu'on puisse dire, c'est que le résultat n'est pas vraiment à la hauteur de mes attentes (testé sur Opera, FF et IE7) :

testni10.png

Le site Nicedit donne des indications différentes :

« Include The following script anywhere on your page:

<script src="[b]http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>

<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script> »

Il est hors de question qu'un de mes programmes appelle des ressources externes sans lesquelles il ne pourrait pas fonctionner !

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...