angular material 在 material 文本区域中显示 html

Question

我正在寻找在 material textarea 中显示 html 的方法。

我有这样的东西

<textarea matInput
  cdkTextareaAutosize
  [formControl]="bodyCtrl"
  #autosize="cdkTextareaAutosize"
  cdkAutosizeMinRows="4"
  cdkAutosizeMaxRows="10">
</textarea>

bodyCtrl的值例如是：

<span style="color:green">test<span>

这就是它的呈现方式，但当然我需要将其显示为带有绿色内容的 html 标签。

Answer 1

由于 textarea 仅将其内容呈现为文本，因此您无法操纵浏览器将内容视为 html。一个解决方法是使用 conteneditable 属性和 div 并在 innerHTML 属性的帮助下呈现 html。您可以根据需要将个性化 css 添加到 div。

<div contenteditable="true" [innerHtml]="bodyCtrl.value" ></div>

angular material 在 material 文本区域中显示 html

angular material display html in material textarea

html

textarea

angular-material

angular