Modifier dynamiquement page HTML + annotations en Javascript

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 <span style="color: black; font-size: 18px;.....>le texte selectionné</span>

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.

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.

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

Par exemple j'ai sélectionné le mot simple, comment faire pour mettre ce texte en gras ou bien en italique ....etc.

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.

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)

@ChasseurDeChimeres
Merci pour ta réponse.
J'espère trouver une solution

et @PetoleTeam
Merci pour ta réponse.
Pouvez-vous expliquer plus?

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?

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)