web-dev-qa-db-fra.com

Rendu HTML dans la zone de texte

Je dois être capable de restituer des balises HTML dans une zone de texte (<strong>, <i>, <u>, <a>), mais textareas n'interprète leur contenu que sous forme de texte. Existe-t-il un moyen simple de le faire sans faire appel à des bibliothèques/plugins externes (j'utilise jQuery)? Si non, connaissez-vous un plugin jQuery que je pourrais utiliser pour faire cela?

javascriptjqueryhtmltextarea
130
The Coding Monk

Cela n'est pas possible avec un textarea. Ce que vous recherchez est un contenu éditable div, ce qui se fait très facilement:

<div contenteditable="true"></div>

jsFiddle

div.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
}

strong {
  font-weight: bold;
}
<div contenteditable="true">This is the first line.<br>
See, how the text fits here, also if<br>there is a <strong>linebreak</strong> at the end?
<br>It works nicely.
<br>
<br><span style="color: lightgreen">Great</span>.
</div>
212
mekwall

Avec un div éditable, vous pouvez utiliser la méthode document.execCommand ( plus de détails ) pour fournir facilement la prise en charge des balises que vous avez spécifiées et de certaines autres fonctionnalités.

#text {
    width : 500px;
        min-height : 100px;
        border : 2px solid;
}
<div id="text" contenteditable="true"></div>
<button onclick="document.execCommand('bold');">toggle bold</button>
<button onclick="document.execCommand('italic');">toggle italic</button>
<button onclick="document.execCommand('underline');">toggle underline</button>
30
Sampath Liyanage

Un addendum à cela. Vous pouvez utiliser des entités de caractères (telles que changer <div> en &lt;div&gt;) et le rendu apparaîtra dans la zone de texte. Mais quand il est enregistré, la valeur de la zone de texte est le texte tel que rend. Donc, vous n'avez pas besoin de décoder. Je viens de tester cela sur tous les navigateurs (c'est-à-dire de retour à 11).

2
axlotl

J'ai le même problème mais en sens inverse, et la solution suivante. Je souhaite placer le code HTML d'une div dans une textarea (pour pouvoir modifier certaines réactions sur mon site Web, je souhaite que textarea se trouve au même endroit.)

Pour mettre le contenu de cette div dans une zone de texte, j'utilise:

var content = $('#msg500').text();
$('#msg500').wrapInner('<textarea>' + content + '</textarea>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div>
1
Houdini

essayez cet exemple sur JSFiddle

<style>
.editable {
    width: 300px;
    height: 200px;
    border: 1px solid #ccc;
    padding: 5px;
    resize: both;
    overflow: auto;
}
</style>

<div class="editable" contenteditable="true"></div>
<button class="bold">toggle red</button>
<button class="italic">toggle italic</button>

<script>
function toggleRed() {
    var text = $('.editable').text();
    $('.editable').html('<p style="color:red">'+text+'</p>');
}

function toggleItalic() {
    var text = $('.editable').text();
    $('.editable').html("<i>"+text+"</i>");
}

$('.bold').click(function () {
    toggleRed();
});

$('.italic').click(function () {
    toggleItalic();
});
</script>

Edité par Jeffrey Crowder - Développeur Web/Programmeur Windows

J'ai ajouté un violon JS du code.

1
david grinstein