Jump to content
Sign in to follow this  
Gytha_Ogg

Un éditeur de texte riche

Rate this topic

Recommended Posts

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 !

Share this post


Link to post
Share on other 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 !

Share this post


Link to post
Share on other 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 !

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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)

Share this post


Link to post
Share on other 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 :)

Share this post


Link to post
Share on other 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

Share this post


Link to post
Share on other 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 ...

Share this post


Link to post
Share on other sites
au lieu d'un <b>, il prefere le <strong>

Ben justement, c'est préférable sémantiquement parlant

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Dans tous les navigateurs actuels, ils ont strictement le même effet ;)

Et sinon, une mise en forme, c'est déjà de la sémantique.

Share this post


Link to post
Share on other 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)

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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 !

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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????

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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).

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other sites

Je persiste, une lettre n'est pas un texte, et pour ton exemple, c'est la pseudo classe :first-letter qu'il faudrait utiliser

Share this post


Link to post
Share on other 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...

Share this post


Link to post
Share on other 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 !

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...