Rendre le texte sélectionné en gras ou non

J'enveloppe le texte sélectionné dans les balises span, lorsque vous cliquez sur un bouton. Si je sélectionne un morceau de texte différent et que je clique sur le bouton, ce texte est également enveloppé dans les balises. Cependant, lorsque je sélectionne un morceau de texte qui est déjà enveloppé dans les tags span, j'aimerais supprimer ces tags pour débloquer le texte, au lieu d'enrayer ces balises dans plus de balises.

HTML

<div contenteditable="true" class="textEditor">Some random text.</div> <a href="#" class="embolden">Bold</a>

 $('.embolden').click(function(){ var highlight = window.getSelection(); var span = '<span class="bold">' + highlight + '</span>'; var text = $('.textEditor').html(); $('.textEditor').html(text.replace(highlight, span)); });

JSFiddle Demo

Je suis probablement devenu gourmand avec cette demande, mais je sélectionne juste une partie d'un texte qui est déjà enveloppé dans les tags span, mais pas tout, je voudrais fermer la balise d'origine au début de la sélection, ouvrir une Nouvelle étiquette juste après, fermez la nouvelle étiquette à la fin de la sélection et ouvrez une nouvelle étiquette après cela.

Pourquoi vous essayez de faire un texte en gras à la main lorsque vous pouvez utiliser la fonction intégrée. Les navigateurs modernes implémentent la fonction execCommand qui permet d' execCommand en gras, souligner, etc. sur le texte. Vous pouvez écrire simplement:

 $('.embolden').click(function(){ document.execCommand('bold'); });

Et le texte sélectionné sera en gras et s'il est déjà gras, le style de texte sera supprimé.

Une liste de commandes et un petit document peuvent être trouvés ici . (Plus d'informations sur le support du navigateur ici ).

MISE À JOUR: Ici, vous avez un Fiddle qui travaille.

Fonction copiée à partir de cette réponse: Obtenez l'élément parent d'un texte sélectionné

Je n'ai pas vraiment perfectionné cela et je pense que cela ne fonctionne que sur les sélections exactes, mais cela vous donne une idée de la façon de contourner cela. La fonction de clic vérifie si l'élément parent de la sélection actuelle a la classe 'en gras', si c'est le cas, il remplace cet élément par la sélection d'origine.

http://jsfiddle.net/XCb95/4/

 jQuery(function($) { $('.embolden').click(function(){ var highlight = window.getSelection(); var span = '<span class="bold">' + highlight + '</span>'; var text = $('.textEditor').html(); var parent = getSelectionParentElement(); if($(parent).hasClass('bold')) { $('.textEditor').html(text.replace(span, highlight)); } else { $('.textEditor').html(text.replace(highlight, span)); } }); }); function getSelectionParentElement() { var parentEl = null, sel; if (window.getSelection) { sel = window.getSelection(); if (sel.rangeCount) { parentEl = sel.getRangeAt(0).commonAncestorContainer; if (parentEl.nodeType != 1) { parentEl = parentEl.parentNode; } } } else if ( (sel = document.selection) && sel.type != "Control") { parentEl = sel.createRange().parentElement(); } return parentEl; }

J'ai finalement:

 <!DOCTYPE html> <html> <head> <style type="text/css"> .emphasized { text-decoration: underline; font-weight: bold; font-style: italic; } </style> </head> <body> <button type="button" onclick="applyTagwClass(this);" data-tag="span" data-tagClass="emphasized">Bold</button> <div contenteditable="true" class="textEditor"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada quis lorem non consequat. Proin diam magna, molestie nec leo non, sodales eleifend nibh. Suspendisse a tellus facilisis, adipiscing dui vitae, rutrum mi. Curabitur aliquet lorem quis augue laoreet feugiat. Nulla at volutpat enim, et facilisis velit. Nulla feugiat quis augue nec sodales. Nulla nunc elit, viverra nec cursus non, gravida ac leo. Proin vehicula tincidunt euismod.</p> <p>Suspendisse non consectetur arcu, ut ultricies nulla. Sed vel sem quis lacus faucibus interdum in sed quam. Nulla ullamcorper bibendum ornare. Proin placerat volutpat dignissim. Ut sit amet tellus enim. Nulla ut convallis quam. Morbi et sollicitudin nibh. Maecenas justo lectus, porta non felis eu, condimentum dictum nisi. Nulla eu nisi neque. Phasellus id sem congue, consequat lorem nec, tincidunt libero.</p> <p>Integer eu elit eu massa placerat venenatis nec in elit. Ut ullamcorper nec mauris et volutpat. Phasellus ullamcorper tristique quam. In pellentesque nisl eget arcu fermentum ornare. Aenean nisl augue, mollis nec tristique a, dapibus quis urna. Vivamus volutpat ullamcorper lectus, et malesuada risus adipiscing nec. Ut nec ligula orci. Morbi sollicitudin nunc tempus, vestibulum arcu nec, feugiat velit. Aenean scelerisque, ligula sed molestie iaculis, massa risus ultrices nisl, et placerat augue libero vitae est. Pellentesque ornare adipiscing massa eleifend fermentum. In fringilla accumsan lectus sit amet aliquam.</p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script> function applyTagwClass(self) { var selection = window.getSelection(); if (selection.rangeCount) { var text = selection.toString(); var range = selection.getRangeAt(0); var parent = $(range.startContainer.parentNode); if (range.startOffset > 0 && parent.hasClass(self.attributes['data-tagClass'].value)) { var prefix = '<' + self.attributes['data-tag'].value + ' class="' + self.attributes['data-tagClass'].value + '">' + parent.html().substr(0,selection.anchorOffset) + '</' + self.attributes['data-tag'].value + '>'; var suffix = '<' + self.attributes['data-tag'].value + ' class="' + self.attributes['data-tagClass'].value + '">' + parent.html().substr(selection.focusOffset) + '</' + self.attributes['data-tag'].value + '>'; parent.replaceWith(prefix + text + suffix); } else { range.deleteContents(); range.insertNode($('<' + self.attributes['data-tag'].value + ' class="' + self.attributes['data-tagClass'].value + '">' + text + '</' + self.attributes['data-tag'].value + '>')[0]); //Remove all empty elements (deleteContents leaves the HTML in place) $(self.attributes['data-tag'].value + '.' + self.attributes['data-tagClass'].value + ':empty').remove(); } } } </script> </body> </html>

Vous remarquerez que j'ai étendu le bouton pour avoir un couple d'attributs de data- . Ils devraient être plutôt explicites.

Cela s'appliquera également aux sous-sections du texte sélectionné qui se trouvent dans l'élément actuellement ciblé (tout dépend du nom de la classe).

Comme vous pouvez le voir, j'utilise une classe qui est une combinaison de choses, ce qui vous donne plus de polyvalence.

Ce code passe par le contenu du textEditor et supprime toutes les balises span. Il devrait faire l'affaire.

 jQuery(function($) { $('.embolden').click(function(){ $('.textEditor span').contents().unwrap(); var highlight = window.getSelection(); var span = '<span class="bold">' + highlight + '</span>'; var text = $('.textEditor').html(); $('.textEditor').html(text.replace(highlight, span)); }); });

Quelque chose comme ça devrait faire l'affaire:

 var span = ''; jQuery(function($) { $('.embolden').click(function(){ var highlight = window.getSelection(); if(highlight != ""){ span = '<span class="bold">' + highlight + '</span>'; }else{ highlight = span; span = $('span.bold').html(); } var text = $('.textEditor').html(); $('.textEditor').html(text.replace(highlight, span)); }); });

Les navigateurs modernes utilisent la fonction execCommand qui vous permet d'enrichir le texte très facilement. Il fournit également d'autres styles comme le soulignement, etc.

 <a href="#" onclick="emboldenFont()">Bold</a> function emboldenFont() { document.execCommand('bold', false, null); }

Vérifiez que c'est ce que vous vouliez ???

en utilisant

 .toggleclass()

(Pour rédiger tout le texte dans la classe d'éditeur de texte en gras seulement)