Je travaille sur un système où nous comptons sur de nombreux "administrateurs / gestionnaires" pour envoyer des e-mails aux utilisateurs à partir de la base de données. L'une des principales caractéristiques est de pouvoir envoyer plusieurs courriers électroniques à la fois, avec des informations spécifiques pertinentes pour chacun d'eux. Une autre caractéristique clé est de pouvoir créer des e-mails à la main, car il est généralement nécessaire de les modifier légèrement à chaque fois, mais avoir un modèle de base fait gagner beaucoup de temps.
Pour cela, nous avons la solution "modèles" typique, où nous avons un modèle qui ressemble un peu à ceci:
Hello {{recipient.full_name}},
Your application to {{activity.title}} has been accepted.
You have requested to participate on dates {{application.dates}}, in role {{application.role}}
Blah blah blah
Le problème que nous rencontrons est évidemment que (comme nous nous y attendions), les gestionnaires ne comprennent pas toute l'idée des "variables", et ils font des choses comme les écraser, ce qui ne leur permet pas d'envoyer plus d'une personne à la fois, en supposant ceux-ci ne vont pas être remplacés et que le système est cassé, ou même des choses inexplicables comme "Bonjour {{John}}".
Le gros problème est que cela n'est pas relégué, comme d'habitude, dans une section "admin" où seuls quelques utilisateurs expérimentés ont accès à la modification des modèles qui sont envoyés automatiquement, et ils sont censés savoir ce qu'ils font. Chaque utilisateur du système est exposé à ce problème.
La solution évidente serait de remplacer les variables avant d' afficher ce modèle pour que l'utilisateur le modifie, mais cela ne fonctionne pas lors de l'envoi de courriels à plusieurs personnes.
Cela semble être un problème assez courant, et nous espérons en quelque sorte que quelqu'un l'a déjà résolu.
Avez-vous vu quelque part / créé / pouvez-vous penser à de bonnes solutions à ce problème?
Mise à jour
Ce que j'ai fini par faire sur la base de la réponse de Daniel B était de détecter, en fonction de la position du curseur et de la position de {{}} dans le code, si l'utilisateur était actuellement "à l'intérieur d'une variable" ou "à l'extérieur". À l'intérieur, je montre un petit morceau de texte sous la grande zone de texte expliquant que cela va être remplacé, et qu'ils peuvent le supprimer complètement s'ils le souhaitent, mais ils ne peuvent pas le modifier.
Je fais cela onClick, onChange, onKeyDown, onKeyUp. Pour les événements "clé", si nous sommes à l'intérieur d'une variable, je ne renvoie VRAI que si le code clé est l'une des quelques clés "de navigation". Sinon, je retourne FALSE, ce qui empêche effectivement l'édition de cette variable.
Ce n'est pas parfait, mais c'était très bon marché et semble efficace.
Réponses:
À la demande des commentaires dans la réponse de ChrisF, voici une solution que j'ai utilisée dans le passé:
Mon implémentation a fini par ressembler à ceci:
Il a la surbrillance facultative de la variable pour la différencier du texte standard.
Les délimiteurs variables sont réellement là, ils ont juste les mêmes couleurs de premier plan et d'arrière-plan.
Évidemment, cela est très différent de votre implémentation, qui est basée sur HTML. J'examinerais probablement la façon dont l'éditeur de Gmail est implémenté; il semble être similaire à une zone de texte, mais est capable d'avoir des images en ligne (smileys, etc.), ce qui est similaire au comportement que vous recherchez.
la source
J'envisagerais de changer la façon dont le modèle est présenté à l'utilisateur afin que vous puissiez rendre les parties qui seront modifiées par le code non modifiables. Quelque chose comme ça:
Les bits que vous ne souhaitez pas que l'utilisateur modifie ne sont plus modifiables. Vous pouvez inclure un bouton de fermeture afin qu'ils puissent supprimer les éléments s'ils n'en ont pas besoin. Vous pouvez également inclure un texte explicatif et / ou des info-bulles pour expliquer ce que
{{...}}
signifient les bits et pourquoi ils doivent être laissés seuls.L'utilisation de quelque chose comme un Silverlight / WPF
WrapPanel
pour chaque paragraphe peut vous donner quelque chose qui permet à chaque partie (modifiable et non modifiable) de circuler à mesure que le texte contrôlé par l'utilisateur grandit et se rétrécit.la source
WrapPanel
pour chaque paragraphe pourrait vous donner quelque chose comme vous le souhaitez.