besoin d'insérer un lien (remplacer le texte en surbrillance)
L'idée est - Sélectionnez une solution? p> p> lorem code> - Tapez un HREF à l'intérieur d'une entrée - et appuyez sur Entrée - Définir un lien. P> Problème - Le texte en surbrillance n'est pas mis en surbrillance si INPA code> a la mise au point. p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='story' id='story'>lorem ipsum</div>
<br>
<input type='text' class='inpa' id='inpa'>
3 Réponses :
Ce que vous avez décrit est impossible si vous vous attendez à ce que le système fasse cela pour vous. Cependant, vous pouvez facilement y parvenir avec peu de javascript. Lorsqu'un utilisateur sélectionne un texte, saisissez-le à l'aide de JS et mettez-la en surbrillance à l'aide de CSS . Je voudrais envelopper le texte dans un span ou un div ou quelque chose et donnez-lui un ID unique afin que vous puissiez y accéder plus tard. Vous pouvez savoir comment obtenir le texte ici . Donc, lorsque l'utilisateur se concentre sur l'entrée, le texte semblera comme s'il est encore mis en surbrillance et une fois que l'utilisateur définit le lien, vous pouvez mettre à jour le texte à nouveau de la manière que vous souhaitez.
Voici l'idée de base sur ce dont je parlais dans les commentaires sur la mémorisation de la gamme et de le recréer.
p>
<div id="foo" contenteditable="true"> Bacon ipsum dolor amet leberkas spare ribs swine, tenderloin t-bone pork chop corned beef flank filet mignon rump beef sausage turducken. Pork chop kielbasa ground round, t-bone pork belly turducken brisket ribeye strip steak frankfurter pork loin pastrami filet mignon prosciutto bacon. Venison pork kielbasa, doner short ribs ball tip tri-tip porchetta boudin chuck salami shoulder shank shankle pastrami. Pig sirloin strip steak, frankfurter chicken beef ribs ribeye salami t-bone. Pork belly doner short loin ribeye burgdoggen ground round pork kielbasa frankfurter. Capicola spare ribs biltong kielbasa rump pork chop cow prosciutto shankle burgdoggen. Turkey shankle pancetta pig. </div> <input type="text" id="test" />
Merci beaucoup pour vos efforts, s'il s'agit du seul moyen (le semble) que je suis surprise qu'il n'y a pas de moyen facile pour une tâche aussi triviale.
Pour obtenir le résultat attendu, utilisez l'option ci-dessous
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='story' id='story'>lorem ipsum</div> <br> <input type='text' class='inpa' id='inpa'>
Je ne sais pas comment deux choses peuvent avoir la mise au point à la fois ... vous seriez mieux à vous rappeler probablement la sélection et que de recréer la sélection.
@EPASCARELLO, une fonctionnalité similaire est présente ici. Lorsque un message est créé avec un lien à l'intérieur
Oui avant que l'élément ne se concentre que vous stockez la sélection. Quand ils sont terminés, vous recréez la sélection et exécutez votre code. La bibliothèque Rangy facilite le faire.
@qadenza La fonctionnalité que vous référencez semble être
iframe -based, car c'est un contexte totalement différent pour la sélection. Je ne pense pas que ce soit possible avec JavaScript seul. Une option peut être de choisir des sélections de style aprèsflou , puis de resélectionner surfocus . S'il s'agit d'une option pour vous, je pourrais essayer d'écrire une réponse pour cela.@andrewgu, pls essaie, semble logique, mais peut-être que le problème pourrait être si la sélection n'est pas à la fin ni au sommet du parent, mais quelque part à l'intérieur de
@qadenza Comme une autre réponse a déjà été acceptée, je ne vais pas essayer ou afficher plus loin sur ce fil dans l'intérêt du temps. J'espère que vous êtes capable de résoudre votre problème!