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并不意味着充当容器;它是文本的输入。如果要将内容整体设置为，则可以将样式应用于文本区域;但是，textarea中的单个文本片段无法设置样式。你可以做到这一点的一种方法是将textarea的内容加载到div中 - 可以设置样式。

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

同样，这是一个related SO question。这个问题的要点是将你的textarea内容转储到一些＆＃34;假的＆＃34; textarea实际上是一个div。来自使用jQuery的问题的提示示例：

HTML：

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

JavaScript的：

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

请随时查看此Fiddle。

Answer 2

不适用于textarea，因为您可以在其中设置单独的线条样式。你必须这样做：

<强> 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;
}

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

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

3 个答案:

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