Rendering HTML inside textarea

Question

I need to be able to render some HTML tags inside a textarea  namely  lt strong gt    lt i gt    lt u gt    lt a gt   but textareas only interpret their content as text  Is there an easy way of doing it without relying on external libraries plugins  I m using jQuery   If not  do you know of any jQuery plugin I could use to do this

User · Accepted Answer

This is not possible to do with a textarea  What you are looking for is an content editable div  which is very easily done    lt div contenteditable  true  gt  lt  div gt    jsFiddle   x000D   x000D  div editable   x000D      width  300px  x000D      height  200px  x000D      border  1px solid  ccc  x000D      padding  5px  x000D    x000D   x000D  strong   x000D    font-weight  bold  x000D    x000D   lt div contenteditable  true  gt This is the first line  lt br gt  x000D  See  how the text fits here  also if lt br gt there is a  lt strong gt linebreak lt  strong gt  at the end  x000D   lt br gt It works nicely  x000D   lt br gt  x000D   lt br gt  lt span style  color  lightgreen  gt Great lt  span gt   x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Since you only said render  yes you can  You could do something along the lines of this   x000D   x000D  function render    x000D   var inp       document getElementById  box    x000D   var data     x000D   lt svg xmlns  http   www w3 org 2000 svg  width    inp offsetWidth   height    inp offsetHeight   gt  x000D   lt foreignObject width  100   height  100   gt  x000D   lt div xmlns  http   www w3 org 1999 xhtml   x000D  style  font-family monospace font-style  normal  font-variant  normal  font-size 13 3px padding 2px    gt  x000D    inp value   lt i style  color red  gt cant touch this lt  i gt  x000D   lt  div gt  x000D   lt  foreignObject gt  x000D   lt  svg gt    x000D   var blob   new Blob   data    type  image svg xml      x000D   var url URL createObjectURL blob   x000D   inp style backgroundImage  url   URL createObjectURL blob       x000D     x000D   onload function    x000D    render    x000D    ro   new ResizeObserver render   x000D   ro observe document getElementById  box     x000D     x000D   box  x000D    color transparent  x000D    caret-color  black  x000D    font-style  normal   must be same as in the svg for caret to align   x000D    font-variant  normal   x000D    font-size 13 3px  x000D    padding 2px  x000D    font-family monospace  x000D    x000D   lt textarea id  box  oninput  render    gt you can edit me  lt  textarea gt  x000D   x000D   x000D   This makes it so that a textarea will render html  Besides the flashing when resizing  inability to directly use classes and having to make sure that the div in the svg has the same format as the textarea for the caret to align correctly  it s works

User · Answer

This is possible with  lt textarea gt  the only thing you need to do is use  Summernote WYSIWYG editor  it interprets HTML tags inside a textarea  namely  lt strong gt    lt i gt    lt u gt    lt a gt

User · Answer

With an editable div you can use the method document execCommand  more details  to easily provide the support for  the tags you specified and for some other functionality     x000D   x000D   text   x000D      width   500px  x000D   min-height   100px  x000D   border   2px solid  x000D    x000D   lt div id  text  contenteditable  true  gt  lt  div gt  x000D   lt button onclick  document execCommand  bold     gt toggle bold lt  button gt  x000D   lt button onclick  document execCommand  italic     gt toggle italic lt  button gt  x000D   lt button onclick  document execCommand  underline     gt toggle underline lt  button gt  x000D   x000D   x000D

User · Answer

An addendum to this  You can use character entities  such as changing  lt div gt  to  amp lt div amp gt   and it will render in the textarea  But when it is saved  the value of the textarea is the text as rendered  So you don t need to de-encode  I just tested this across browsers  ie back to 11

User · Answer

I have the same problem but in reverse  and the following solution  I want to put html from a div in a textarea  so I can edit some reactions on my website  I want to have the textarea in the same location    To put the content of this div in a textarea I use    x000D   x000D  var content       msg500   text    x000D      msg500   wrapInner   lt textarea gt     content     lt  textarea gt     x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div id  msg500  gt here some  lt strong gt html lt  strong gt   lt i gt tags lt  i gt   lt  div gt  x000D   x000D   x000D

User · Answer

try this example    x000D   x000D  function toggleRed     x000D    var text       editable   text    x000D        editable   html   lt p style  color red  gt     text     lt  p gt     x000D    x000D   x000D  function toggleItalic     x000D    var text       editable   text    x000D        editable   html   lt i gt     text     lt  i gt     x000D    x000D   x000D      bold   click function     x000D    toggleRed    x000D      x000D   x000D      italic   click function     x000D    toggleItalic    x000D      x000D   editable   x000D    width  300px  x000D    height  200px  x000D    border  1px solid  ccc  x000D    padding  5px  x000D    resize  both  x000D    overflow  auto  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div class  editable  contenteditable  true  gt  lt  div gt  x000D   lt button class  bold  gt toggle red lt  button gt  x000D   lt button class  italic  gt toggle italic lt  button gt  x000D   x000D   x000D

[javascript] Rendering HTML inside textarea

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to textarea