Display a string in textarea with html/css styling

css, html, jquery, razor

Solution

A `textarea` is not meant to act as a container; it is an input for text. If you want to style the contents as a whole, then you can apply style to the text area itself; however, individual pieces of text in the textarea cannot be styled. One way you could do this is by loading the content of the textarea into a div -- which CAN be styled.

Check out Coyier's examples on how to style textareas: http://css-tricks.com/textarea-tricks/ .

Likewise, here is a related SO question. The gist from the question is to dump your textarea content into some "fake" textarea which is actually a div. Cue example from question using jQuery:

HTML:

<div id="fakeTextarea"></div>
<textarea id="realTextarea"></textarea>

JavaScript:

$('#fakeTextarea').html( $('#realTextarea').val() );

Feel free to check out this Fiddle.

Problem

I have a string that contains some font css styling built into the string. I am using Razor and I want to display the result within a textareafor or something similar. Is there a good way to do this? Here is what the string looks like: ``` <font color="DD0000"><b>7/10/2014 - CFENDALL</b>&nbsp;&nbsp;Hi Mike - I have invoice 133528E for PO 158960 - This is past due - Please let me know when PO is received. Thank you. Cynthia</font> ``` I want the styled version to appear in the textarea but as of right now it just displays the string without applying the css. Here is what I currently have in my view: ``` <div class="editor-field" id="summary"> @Html.TextAreaFor(model => model.Notes, new { @readonly = "readonly"}) </div> ```

Original source

Related problems