[Javascript] Rendu HTML à l'intérieur de la zone de texte


Answers

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

Question

Je dois être capable de rendre des balises HTML à l'intérieur d'une zone de texte (à savoir <strong>, <i>, <u>, <a>), mais les zones de texte interprètent uniquement leur contenu sous forme de texte. Y at-il un moyen facile de le faire sans compter sur les bibliothèques / plugins externes (j'utilise jQuery)? Si non, connaissez-vous un plugin jQuery que je pourrais utiliser pour faire cela?




J'ai le même problème mais à l'envers, et la solution suivante. Je veux mettre html d'un div dans un textarea (ainsi je peux éditer quelques réactions sur mon site Web, je veux avoir le textarea dans le même endroit.)

<div id="msg500">here some <strong>html</strong> <i>tags</i>.</div>

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

var content = $('#msg500').text();
$('#msg500').wrapInner('<textarea>'+content+'</textarea>');



Puisque vous avez seulement dit rendre, oui vous pouvez. Vous pourriez faire quelque chose dans le sens de ceci:

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 html! Outre le clignotement lors du redimensionnement, l'impossibilité d'utiliser directement les classes et de s'assurer que la div dans le svg a le même format que la zone de textarea pour que le caret s'aligne correctement, ça marche!