How to insert HTML code into a textarea?

Asked

Viewed 1,955 times

5

I would like to know how I can put an HTML code in a textarea, because I have a textarea that receives data from DB dynamically by date filters. ex:

  <textarea maxlength="8000" rows="15" style="resize:none; width:100%">{{ctrl.VariavelDB}}</textarea>

utilizo Angularjs, the value of the variable would be like this:

ctrl.VariavelDB = "Lorem bla bla bla <b> negrito </b> bla bla bla <br> <h1> TESTE BAL BLA BLA </h1>"

when it is inserted it shows the code, which I do someone can help me??
Thanks in advance.

javascript html angularjs textarea

  • Da uma pesquisada em: https://docs.angularjs.org/api/ng/directive/ngBindHtml

  • You won’t be able to make the code be interpreted inside the textarea, for that use a WYSIWYG editor. I recommend the Quill.

  • 1

    Why a textarea? Will show html should use a compatible tag, a div for example

2 answers

4


With <textarea> is not possible. I believe you are looking for a <div> editable: 

<div contenteditable="true">

Take the example:

<div contenteditable="true">Primeira linha.<br> Veja como o texto se adequá aqui. Também<br> é possível <strong>inserir quebras de linha</strong> ao final?
  <br>Funciona corretamente....
  <br>
  <br><span style="color: lightgreen">...ao invés de só texto você também aplica o seu estilo.</span>.
</div>

0

We usually do this with an element <DIV>.

It is possible to do with other HTML elements such as <P> . Example: https://www.w3schools.com/Tags/att_global_contenteditable.asp

So, the element can receive an html, for example javascript, with jquery (please see the similar notation for the angular):

$("#meuDiv").html("lorem <strong>ipsum</strong>.");

Browser other questions tagged javascript html angularjs textarea

You are not signed in. Login or sign up in order to post.