Vous qui maîtrisez maintenant TypePad sur le bout des doigts, vous savez très certainement que vous pouvez activer une option dans les commentaires qui donnent la possibilité à vos lecteurs d'enrichir la mise en forme de leur prose grâce à quelques balises HTML.
Le problème est que l'immense majorité des lecteurs de blogs ne connait strictement rien au HTML et qu'ils seraient bien en peine de devoir mettre un peu de gras ou d'italic.
Pour leur faciliter la tâche, je vous propose d'ajouter ce petit éditeur HTML tout simple. Celui-ci est compatible avec la grande majorité des navigateurs du marché (IE 6+, FF 1.5+, Safari 4+, Chrome 5+ et Opera 10+).
Pour mettre en place cet éditeur, nous allons avoir besoin :
- de vérifier que dans Paramètres > Commentaires, on donne bien la possibilité à l'utilisateur d'inclure des balises HTML,
- de faire appel à jQuery (si ce n'est pas déjà fait),
- de faire appel à la librairie de cet éditeur,
- de styler un peu tout ca,
- d'appeler la fonction d'édition sur le champ de rédaction de commentaires,
- et de forcer l'activation des boutons d'envoi et d'aperçu de TypePad.
Accessoirement, nous paramétrerons un ou deux détails supplémentaires comme le fait de n'afficher que les boutons fonctionnant sur TypePad.
Pour commencer, je vous invite à vous rendre dans votre gestionnaire de fichiers, et dans le dossier correspondant au blog sur lequel vous voulez ajoutez ce widget. Etant un petit peu maniac du rangement, j'ai créé un dossier sources (dans lequel je regroupe tous les fichiers sources des widgets de mon blog), puis un dossier wysiwyg. Je me place donc dans ce dossier, et j'y envoie le fichier ci-dessous :
Téléchargement Jquery.cleditor.min
Une fois que vous avez envoyé ce fichier, créez un dossier "images" et placez-vous dedans. Envoyez alors les deux fichiers ci-dessous :
Rentrons maintenant dans le vif du sujet. Il va nous falloir ajouter un module HTML Personnalisé dans lequel nous allons placer notre code. Ca se passe donc dans Habillage > Contenu. Le code à placer dans ce module est le suivant :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="../../sources/wysiwyg/jquery.cleditor.min.js"></script>
Ces deux premières lignes nous permettent de faire appel à jQuery et à la librairie de l'éditeur que nous venons de mettre en ligne. Si vous avez créé les mêmes dossiers que moi, vous n'aurez rien ) changer. Nous ajoutons ensuite les éléments de style :
<style>
.cleditorMain {border:1px solid #999; padding:0 1px 1px; background-color:white}
.cleditorMain iframe {border:none; margin:0; padding:0}
.cleditorMain textarea {border:none; margin:0; padding:0; overflow-y:scroll; font:10pt Arial,Verdana; resize:none; outline:none /* webkit grip focus */}
.cleditorToolbar {background: url('../../sources/wysiwyg/images/toolbar.gif') repeat}
.cleditorGroup {float:left; height:26px}
.cleditorButton {float:left; width:24px; height:24px; margin:1px 0 1px 0; background: url('../../sources/wysiwyg/images/buttons.gif')}
.cleditorDisabled {opacity:0.3; filter:alpha(opacity=30)}
.cleditorDivider {float:left; width:1px; height:23px; margin:1px 0 1px 0; background:#CCC}
.cleditorPopup {border:solid 1px #999; background-color:white; position:absolute; font:10pt Arial,Verdana; cursor:default; z-index:10000}
.cleditorList div {padding:2px 4px 2px 4px}
.cleditorList p,
.cleditorList h1,
.cleditorList h2,
.cleditorList h3,
.cleditorList h4,
.cleditorList h5,
.cleditorList h6,
.cleditorList font {padding:0; margin:0; background-color:Transparent}
.cleditorColor {width:150px; padding:1px 0 0 1px}
.cleditorColor div {float:left; width:14px; height:14px; margin:0 1px 1px 0}
.cleditorPrompt {background-color:#F6F7F9; padding:4px; font-size:8.5pt}
.cleditorPrompt input,
.cleditorPrompt textarea {font:8.5pt Arial,Verdana;}
.cleditorMsg {background-color:#FDFCEE; width:150px; padding:4px; font-size:8.5pt}
</style>
Tout comme pour le script, si vous avez créé la même arborescence que moi, vous ne devriez rien avoir à changer. Sinon il vous faudra mettre à jour le chemin vers les fichiers images.
Il ne nous reste plus qu'à demander à ce qu'au chargement de la page l'éditeur s'applique à l'élément dont l'ID est #comment-text. Cet élément n'étant présent que dans les pages de notes, nous avons la garantie de ne pas voir apparaître des éditeurs wysiwyg n'importe où.
Nous allons par la même occasion lui passer quelques paramètres pour n'afficher que les boutons générant du code accepté par TypePad. Il s'agit de l'élément controls.
Enfin, il ne nous reste plus qu'à forcer l'activation des boutons envoyer et aperçu, ainsi qu'à masquer le texte invitant le commentateur à utiliser des balises HTML.
<script type="text/javascript">
$(document).ready(function() {
$("#comment-text").cleditor({
controls: "bold italic strikethrough | bullets numbering | indent outdent | undo redo | link unlink image | " +
"cut copy paste pastetext | print source"
});
$("#comment-post-button").removeAttr('disabled');
$("#comment-preview-button").removeAttr('disabled');
$(".comments-open-subtext").hide();
});
</script>
Ceux qui le souhaitent peuvent aller voir cette fonctionnalité live ici.
Si vous voulez le fichier non-minimisé de CL Editor pour y effectuer des modifications, vous pouvez le télécharger ici :
Commentaires