使用 html/css 样式在 textarea 中显示字符串

Question

我有一个字符串，其中包含一些内置在字符串中的字体 css 样式。我正在使用 Razor，我想在 textareafor 或类似的东西中显示结果。有什么好办法吗？

字符串如下所示：

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

我希望样式版本出现在 textarea 中，但目前它只显示字符串而不应用 css。

这是我目前的看法：

    <div class="editor-field" id="summary">
        @Html.TextAreaFor(model => model.Notes, new { @readonly = "readonly"})
    </div>

Answer 1

textarea 并不意味着充当容器；它是文本的输入。如果您想为内容整体设置样式，则可以将样式应用于文本区域本身；但是，文本区域中的单个文本不能设置样式。您可以做到这一点的一种方法是将文本区域的内容加载到一个 div 中——可以设置样式。

查看 Coyier 关于如何设置文本区域样式的示例：http://css-tricks.com/textarea-tricks/。

同样，这是一个related SO question。该问题的要点是将您的 textarea 内容转储到实际上是 div 的一些“假” textarea 中。使用 jQuery 的问题提示示例：

HTML：

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

JavaScript：

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

欢迎查看Fiddle。

Answer 2

不适用于文本区域，因为您不能在其中设置单独的行样式。你必须这样做：

---

HTML

<div class="messages"><code contenteditable="true"></code></div>

---

JScript

var messageBox = $('.messages code');

function sendMessage(message, color){
    var color = (typeof color === "undefined") ? "inherit" : color;
    var fullMessage = "<span style=\"color:" + color + "\">" + message + "</span>";
    messageBox.append(fullMessage);
    /*messageBox.scrollTop(messageBox[0].scrollHeight); keeps the area scrolled down */
}

/*You can call this like:*/
var message = "<b>7/10/2014 - CFENDALL</b> Hi Mike - I have invoice 133528E for PO 158960 - This is past due - Please let me know when PO is received.  Thank you.  Cynthia";

sendMessage(message, "#DD0000");

*更新小提琴以添加一些 CSS

小提琴 http://jsfiddle.net/G7BB9/3/

Answer 3

textarea{
    color: #dd0000;
    font-weight: bold;
}

不确定这是否是您要求的答案，但这将是您设置文本区域样式的方式。 您可以使用其他非常肮脏的定位方式，但不推荐