Blog de Philippe Vialatte

1
juin
2011

.Net

Petits soucis avec l’éditeur de Telerik

Un article de Philippe Vialatte Comments

Pas de commentaires

Allez, un petit post pour ne pas oublier (piqure de rappel à l’occasion).

Avertissement préalable: ce composant m’a gonflé…

Dans un projet en cours, pour permettre aux utilisateurs de rentrer du texte (sur une ou plusieurs lignes) avec des urls, des mails et un peu de mises en forme, on s’est dit “pourquoi ne pas utiliser l’éditeur” ?

…grave erreur.

Plus sérieusement, l’éditeur nous à posés les problèmes suivants:

taille par défaut : 130 px. Si on mets une taille plus petite, le rendu est différent sur chaque navigateur. Solution : ajouter du javascript pour redimensionner les éléments de l’éditeur en fonction du navigateur

   1: if ($("div[id$='tbSummary_contentDiv']").length) {

   2:    $("div[id$='tbSummary_contentDiv']").css("height", "29px");

   3:    $("div[id$='tbSummaryWrapper']").css("height", "16px");

   4: }

5:

   6: if ($("div[id$='tbDescription_contentDiv']").length) {

   7:    $("div[id$='tbDescription_contentDiv']").css("height", "59px");

   8:    $("div[id$='tbDescriptionWrapper']").css("height", "10px");

   9: }

10:

  11: if ($("div[id$='tbNewNote_contentDiv']").length) {

  12:    $("div[id$='tbNewNoteWrapper']").css("height", "25px");

  13:    $("div[id$='tbNewNote_contentDiv']").css("height", "20px");

  14: }

15:

  16: if ($("div[id$='tbNote_contentDiv']").length) {

  17:    $("div[id$='tbNote_contentDiv']").css("height", "60px");

  18:    $("div[id$='tbNoteWrapper']").css("height", "45px");

  19: }

gestion de la longueur du texte: l’éditeur à une propriété maxTextLength, et une maxHtmlLength. Seulement, en fonction du navigateur (et plus particulièrement Firefox), le résultat n’est pas (ou mal) pris en compte (espaces non significatifs comptés, entre autres). Solution: désactiver la gestion d’affichage d’un message d’erreur, en modifiant le prototype du RadEditor

   1: var summaryeditor = $find("<%=tbSummary.ClientID %>");

   2: if (summaryeditor != null) {

   3:     var summaryContent = summaryeditor.get_text().replace(/^\s+|\s+$/g, '').replace(/\s+/g, ' ');;

   4:     if (summaryContent.length > summaryeditor.get_maxTextLength()) {

   5:        radalert('Summary cannot exceed ' + summaryeditor.get_maxTextLength() + ' characters.', 300, 100);

   6:        return false;

   7:     }

   8: }

   1: Telerik.Web.UI.RadEditor.prototype.displayMaxTextLengthErrorMessage = function() {

   2: }

gestion des copier/coller depuis word/excel ou autre (oui, on à des utilisateurs créatifs). Normalement, l’éditeur gère tout seul la suppression des tags ajoutés par Word…mais pas sur tous les navigateurs. Solution: désactiver la gestion du “stripping” de caractères lorsque l’utilisateur colle du texte, et gérer la suppression des tags coté serveur (tout en maintenant les tags que l’on veut permettre)

   1: public static string CleanHtml(string html)

   2: {

   3:     // start by completely removing all unwanted tags

   4:     html = Regex.Replace(html, @"<[/]?(font|div|table|tbody|tr|td|span|colgroup|col|xml|del|ins|[ovwxp]:\w+)[^>]*?>", "", RegexOptions.IgnoreCase);

   5:     // then run another pass over the html (twice), removing unwanted attributes

   6:     html = Regex.Replace(html, @"<([^>]*)(?:class|lang|style|size|face|[ovwxp]:\w+)=(?:'[^']*'|""[^""]*""|[^\s>]+)([^>]*)>", "<$1$2>", RegexOptions.IgnoreCase);

   7:     html = Regex.Replace(html, @"<([^>]*)(?:class|lang|style|size|face|[ovwxp]:\w+)=(?:'[^']*'|""[^""]*""|[^\s>]+)([^>]*)>", "<$1$2>", RegexOptions.IgnoreCase);

   8:     return html;

   9: }

gestion des tabulations. Pas stable d’un navigateur à l’autre… Solution: écraser le comportement par défaut

   1: editor.attachEventHandler("onkeydown", function(e)

   2: {

   3:    editor.removeShortCut("InsertTab");

   4:    if(e.keyCode == '9')

   5:    {

   6:         if ($telerik.isSafari)

   7:         {

   8:             $get("Button1").focus();

   9:             e.preventDefault();

  10:             e.preventBubble();

  11:             e.stopPropagation();

  12:         }

  13:    }

  14: });

gestion des modes entre édition et prévisualisation. En fait, l’éditeur n’est pas prévu (à l’utilisation, parce que sur le papier, ca marche) pour changer de mode entre édition et visualisation coté serveur. Solution: injecter du javascript ici et la

   1: toggle = true;

   2: editor.enableEditing(toggle, Telerik.Web.UI.EditingOptions.All);

   3: editor.set_editable(toggle);

   4: editor._contentArea.style.backgroundColor = "";

   5: editor.set_mode(1);

insertion de liens. Comme on ne voulait pas gérer les ancres (anchor), il à fallu modifier le template de saisie des liens. Sauf que celui-ci se basait sur l’existence de l’onglet anchor pour fonctionner. Solution: modifier le javascript…encore

Si on fait le total…ca représente pas loin de 10 jours de dev pour adapter un composant qui fait partie d’une suite “pro”.

Moralité, la prochaine fois qu’on me demande un éditeur pour gérer des liens dans une appli, je le fais à la main, ca ira plus vite :p

Laisser un commentaire

Vous devez être connecté pour poster un commentaire.

Connexion

Identifiez-vous

Créer un compte

Blog de Philippe Vialatte

Laisser un commentaire

Articles récents

Archives

Commentaires récents

Catégories

Méta

Identifiant
Mot de passe

Mot de passe oublié ?