Détecter si le texte est en gras

J'essaie de créer un éditeur WYSIWYG, et jusqu'à présent, je l'ai pour que vous puissiez sélectionner du texte et cliquer sur «Mettre en gras» pour rendre le texte sélectionné en gras. Il enveloppe simplement littéralement les balises < b (sans espace) autour du texte sélectionné. Mais mon problème est que si je veux non gras, mon script a quelques problèmes ...Détecter si le texte est en gras

Jusqu'à présent, voici mon script:

<script language="javascript"> 
function format(tag) //defines function format 
{ 
    var editor = document.getElementById('editor'); 
    var txt = ''; 
    var tester = document.getElementById('tester'); 
    if (window.getSelection) //if your browser uses this method of text selection 
    { 
     txt = window.getSelection(); 
      } 
    else if (document.getSelection) //if your browser uses this method of text selection 
    { 
     txt = document.getSelection(); 
      } 
    else if (document.selection) //if your browser uses this method of text selection 
    { 
     txt = document.selection.createRange().text; 
      } 
    else return; //Return this 
    matched = editor.innerHTML.match(txt); //Find the selected text in the editor 
//  if (matched.style.font-weight = "600") {tester.innerHTML = "already bold";} //if the selected text is bold, say 'already bold' DOES NOT WORK 
//  else {tester.innerHTML = "not bold";} //if it doesn't... 
    editor.innerHTML = editor.innerHTML.replace(matched,"<"+tag+">"+matched+"</"+tag+">");//Wrap <b> tags around it 
} 
</script> 
<input type="button" value="Make Bold" onmousedown="format('b')"> 
<input type="button" value="Make Italic" onmousedown="format('i')"> 
<div id='editor' onclick="javascript:this.designMode='on';" designmode="on" contenteditable="true">Edit Box</div> 

<span id="tester">testing span</span>

Si vous l'essayez, vous pouvez entrer cette case et sélectionnez le texte et cliquez sur Mettre en gras et il sera en gras. Maintenant, cliquez sur Rendre gras à nouveau, mais rien ne se passe. Il s'agit simplement d'ajouter une autre balise < b> autour du texte sélectionné. Je veux que ça le rende non-audacieux; Ordinaire.

Comment faire cela?

Merci :)

Source

2010-07-24 Scott

Il existe un million d'éditeurs WYSIWYG disponibles sous chaque licence que vous pouvez nommer. Sauf si vous faites cela uniquement comme un exercice d'apprentissage, je déconseille de réinventer la roue. – mikerobi

Messing avec le HTML comme une chaîne est une mauvaise idée. Il y a deux meilleures options: la première est d'obtenir l'élément contenant la sélection actuelle de l'utilisateur et d'utiliser les méthodes et les propriétés DOM telles que parentNode pour tester si elle est en gras. C'est difficile à faire par navigateur. Beaucoup plus facile est d'utiliser la méthode execCommand de document, qui basculera automatiquement audace. Il est pris en charge dans les versions récentes de tous les principaux navigateurs.

document.execCommand("bold", false, null);

MISE À JOUR

Notez que dans Firefox (et éventuellement d'autres navigateurs), cela n'a aucun effet sauf si le document a designMode sous tension. Voici un exemple complet. Mettez en surbrillance du texte et appuyez sur Ctrl-B:

<html> 
<head> 
    <title>Test</title> 
    <script type="text/javascript"> 
     window.onload = function() { 
      document.designMode = "on"; 
     }; 

     function keyDown(evt) { 
      if (evt.keyCode == 66 && evt.ctrlKey) { 
       document.execCommand("bold", false, ""); 
      } 
      return false; 
     } 
    </script> 
</head> 
<body onkeydown="return keyDown(event);"> 
    <div>I like tea <b>with milk</b></div> 
</body> 
</html>

Source

2010-07-24 20:22:48

Merci :)! J'ai entendu parler de cette commande, mais aucun site n'a d'explication que je comprends. Il n'y a pas d'exemple. Pouvez-vous s'il vous plaît me donner un exemple de ce travail? J'ai essayé juste de le mettre dans une fonction mais rien ne s'est passé quand j'ai appelé la fonction :( – Scott

Merci beaucoup !! – Scott

Détecter si le texte est en gras

Répondre

Questions connexes