Modifier dynamiquement page HTML + annotations en Javascript

Question

Bonjour à tous.

Je veux developper un site qui a pour objectif l'annotation des documents pédagogiques ( des documents en HTML )

Donc quand un utilisateur entre dans le site et charge son cours document HTML et démmare sa session de lecture et quand il veut annoter une chose.

1- Il selectionne le text qu'il veut annoter,ensuite il peut faire un clic sur un botton par exemple "G" qui mettre ce texte selectionné en gras.

2- Mais avant le mettre ce texte en Gras il faut d'abord ouvrir une fenetre pour sélectionner les objectifs d'annotation et d'autres proprietes (public - private .....)

Pou bien comprendre voir cette image:
/* C'est une image d'une extension Firefox pour l'annotation */


Et après l'annotation on a:



j'ai pu trouver un script qui récupère le texte sélectionné

Mais le problème est comment faire pour modifier dynamiquement ce text en insérant par exemple le texte selectionné

Je sais que ca se faire en manipulant le DOM mais est-ce que je dois utiliser une bibliothèque comme: Jquery, Mootools,.... etc ??? ou bien utiliser une autre chose

Un autre problème est comment programmer un menu comme celui la dans l'image suivante ( Lorsque nous appuyons sur le la petite image de stylo située avant le texte annoté )




Désolé pour mes erreurs en français.
En attente des propositions,accepter mes sincères remerciements.

ChasseurDeChimeres · Answer

Salut;
Je n'ai pas tout compris, mais je peux t'indiquer de quelle maniere modifier les propriété css d'un élément grâce au javascript :

document.getElementByid('id_specifie_dans_la_balise_html').style.color= "red";

(pour les propriétés avec un "-", celui-ci et rétiré et on passe la premiere lettre du deuxieme mots en majuscule (ex : "font-weight" devient "fontWeight")).

En espérant te fournir une piste.

access2008 · Answer

Merci pour cette proposition mais le problème est comment modifier juste les propriétés CSS du texte sélectionné. Par exemple on a Cliquez ici Une fonction simple sur un ensemble E Par exemple j'ai sélectionné le mot simple, comment faire pour mettre ce texte en gras ou bien en italique ....etc.

ChasseurDeChimeres · Answer

Salut;
En fait il faudrait pouvoir tracer l'origine de la sélection mais cela ne semble pas possible, l'autre solution reviendrais à parser l'ensemble de la page pour comparer avec ce qui a été sélectionné, repérer la sélection et introduire une balise "span" autour; mais dans ce cas si l'utilisateur sélectionne par exemple un "et", tous les "et" de la page se retrouveront en gras (ou italique, rouge...).
Peut-être est t'il possible d'envisager quelque chose avec les fonctions "selectionStart" et "selectionEnd".
Dsl de pas pouvoir plus t'aider.

PetoleTeam · Answer

Bonjour à tous,
il existe une fonction pasteHtml mais exclusif IE.
dans ton cas il me semblerait intérressant de regarder du coté de WYSiWYG qui utilisent execcommand et une IFRAME.
;O)

access2008 · Answer

@ChasseurDeChimeres
Merci pour ta réponse.
J'espère trouver une solution

et @PetoleTeam
Merci pour ta réponse.
Pouvez-vous expliquer plus?

ChasseurDeChimeres · Answer

dans ton cas il me semblerait intérressant de regarder du coté de WYSiWYG qui utilisent execcommand et une IFRAME. 

J'ai un peu peur de dire une bourde mais il me semble qu'il souhaite pouvoir effectuer ce genre d'annotations sur des pages qu'il n'a pas conçues lui-même, ce qui serait un problème, par contre si j'ai bien compris toutes les pages que tu désires pouvoir seront hébergées sur votre propre serveur n'est ce pas?

PetoleTeam · Answer

Bonjour,
...clic sur un botton par exemple "G" qui mettre ce texte selectionné en gras...
essaies du coté de 
document.execCommand( "bold", false, null);
pas besoin de ce soucier de la sélection...
;O)

Modifier dynamiquement page HTML + annotations en Javascript

7 réponses

Votre réponse

Discussions similaires