使用HTML/CSS样式在文本区域中显示字符串

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>

我希望样式化的版本出现在文本区域中，但目前它只显示字符串而没有应用CSS。

这是我当前在视图中拥有的内容：

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

- user3788671

---

内容可编辑是一个 HTML 属性，允许用户在页面中编辑文本。将 contenteditable 属性设置为 "true" 可以使元素变得可编辑。用户可以在这些元素中输入文本、删除文本和修改样式。此功能可用于创建交互式 Web 应用程序和富文本编辑器。 - adeneo

Answer 1

一个 textarea 并不是用来做容器的，它是一个文本输入框。如果你想要将内容作为一个整体进行样式设置，那么可以对 文本区域自身 应用样式；但是，在文本区域中单独的文本片段是无法进行样式设置的。一种方法是将文本区域的内容加载到一个可以进行样式设置的 div 中。

可以查看 Coyier 的示例，了解如何设置文本区域的样式：http://css-tricks.com/textarea-tricks/。

同样地，这里有一个相关的 SO 问题：https://dev59.com/XGcs5IYBdhLWcg3wdzxm。从问题中可以得出，将文本区域的内容转储到一个“虚拟”的 textarea（实际上是一个 div）中即可。以下是使用 jQuery 的示例：

HTML：

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

JavaScript:

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

欢迎随意查看这个Fiddle。

- Casey Falk

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");

*更新fiddle以添加一些CSS

fiddle http://jsfiddle.net/G7BB9/3/

- StaticVoid

Answer 3

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

我不确定这是否是你要求的答案，但这就是如何为文本区域设置样式。还有其他一些使用定位的非常粗暴的方式，但不建议使用。

- eg_dac

---

从问题中可以看出，用户“希望在文本区域中显示样式化版本[的字符串]”。将CSS应用于文本区域将会为文本区域添加样式，而不是字符串。 - Casey Falk