Modifier dynamiquement page HTML + annotations en Javascript

Signaler
Messages postés
7
Date d'inscription
dimanche 24 février 2008
Statut
Membre
Dernière intervention
4 mars 2010
-
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
-
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.

7 réponses

Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
3
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.
Messages postés
7
Date d'inscription
dimanche 24 février 2008
Statut
Membre
Dernière intervention
4 mars 2010

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
<html>
<head>
</title>
<script type="text/javascript" language="javascript">
function GetSelectedTxt()
{
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
        }
else if (document.getSelection)
{
txt = document.getSelection();
        }
else if (document.selection)
{
        txt = document.selection.createRange().text;
        }
var MyElement = document.getElementById("MyTextBox");
//Pour récupérer le debut et la fin se la selection 
// MyElement.value = txt.focusOffset ;
// MyElement.value = txt.anchorOffset ;
MyElement.value = txt;
return true;
}
</script>

 Cliquez ici 
Une fonction simple sur un ensemble E




<html>


Par exemple j'ai sélectionné le mot simple, comment faire pour mettre ce texte en gras ou bien en italique ....etc.
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
3
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.
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)
Messages postés
7
Date d'inscription
dimanche 24 février 2008
Statut
Membre
Dernière intervention
4 mars 2010

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

et @PetoleTeam
Merci pour ta réponse.
Pouvez-vous expliquer plus?
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
3
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?
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
18
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)