Rendu du HTML dans le textarea

Question

J'ai besoin de pouvoir rendre certaines balises HTML à l'intérieur d'un textarea (à savoir <strong>, <i>, <u>, <a>) mais les textareas n'interprètent leur contenu que comme du texte. Existe-t-il un moyen simple de le faire sans dépendre de bibliothèques/plugins externes (j'utilise jQuery) ? Si non, connaissez-vous un plugin jQuery que je pourrais utiliser pour faire cela ?

Answer 1

Il n'est pas possible de le faire avec un textarea . Ce que vous recherchez, c'est un contenu modifiable ce qui est très facile à faire :

<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>

Answer 2

Avec un div modifiable, vous pouvez utiliser la méthode document.execCommand ( plus de détails ) pour fournir facilement le support pour les balises que vous avez spécifiées et pour d'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>

Answer 3

Puisque vous n'avez parlé que d'équarrissage, oui vous pouvez. Vous pourriez faire quelque chose comme ça :

function render(){
    var inp     = document.getElementById("box");
    var data = `
<svg xmlns="http://www.w3.org/2000/svg" width="${inp.offsetWidth}" height="${inp.offsetHeight}">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml" 
style="font-family:monospace;font-style: normal; font-variant: normal; font-size:13.3px;padding:2px;;">
${inp.value} <i style="color:red">cant touch this</i>
</div>
</foreignObject>
</svg>`;
    var blob = new Blob( [data], {type:'image/svg+xml'} );
    var url=URL.createObjectURL(blob);
    inp.style.backgroundImage="url("+URL.createObjectURL(blob)+")";
 }
 onload=function(){
  render();
  ro = new ResizeObserver(render);
    ro.observe(document.getElementById("box"));
 }

#box{
  color:transparent;
  caret-color: black;
  font-style: normal;/*must be same as in the svg for caret to align*/
  font-variant: normal; 
  font-size:13.3px;
  padding:2px;
  font-family:monospace;
}

<textarea id="box" oninput="render()">you can edit me!</textarea>

Cela fait en sorte qu'un textarea rendra du html ! Outre le clignotement lors du redimensionnement, l'impossibilité d'utiliser directement les classes et le fait de devoir s'assurer que le div dans la section svg a le même format que le textarea pour que le signe d'insertion s'aligne correctement, ça marche !

Answer 4

Essayez cet exemple

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();
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="editable" contenteditable="true"></div>
<button class="bold">toggle red</button>
<button class="italic">toggle italic</button>

Answer 5

Un addendum à cela. Vous pouvez utiliser des entités de caractères (comme la modification <div> à <div> ) et il sera rendu dans la zone de texte. Mais lorsqu'il est enregistré, la valeur de la zone de texte est le texte suivant comme rendu . Vous n'avez donc pas besoin de désencoder. Je viens de tester cela sur plusieurs navigateurs (c'est-à-dire jusqu'à 11).