Angular 如何在角文本区域内添加可单击按钮

我需要一个按钮，是浮动到右上角的文本区域的角度

这是我有的，但不起作用

<textarea matInput  matInput rows="15" cols="40" >
 <div (click)="formatXml()" class="xmlIcon">
     <span matTooltip="'Format Xml'" class="fas fa-search-plus ml-1" ></span>
   </div>           
 </textarea>

.xmlIcon{
    padding-right: 20px;  
    background-position: top right;
    background-repeat: no-repeat;
}

---

可以使用元素包装文本区域和按钮。因此，您可以在相对外部元素中定位绝对按钮

.外部{ 位置：相对位置； 显示：内联块； } .xmlIcon{ 背景位置：右上角； 背景重复：无重复； 背景色：红色； 位置：绝对位置； 顶部：20px； 右：20px； } 按钮

---

可以使用元素包装文本区域和按钮。因此，您可以在相对外部元素中定位绝对按钮

.外部{ 位置：相对位置； 显示：内联块； } .xmlIcon{ 背景位置：右上角； 背景重复：无重复； 背景色：红色； 位置：绝对位置； 顶部：20px； 右：20px； } 按钮 Html

直播

Html

Live

您可以使用具有contenteditable属性的span或任何支持元素，而不是textarea

前

您可以使用范围或任何具有contenteditable属性的支持元素，而不是textarea

前

---

如果调整文本区域的大小，则按钮位于文本区域的外部。如果调整文本区域的大小，则按钮位于文本区域的外部。

<div class="textarea-container">
 <textarea name="foo">Some content here...</textarea>
 <button>Menu</button>
</div>

.textarea-container {
  position: relative;
 }
.textarea-container textarea {
 width: 100%;
 height: 100%;
 box-sizing: border-box;
}
.textarea-container button {
 position: absolute;
 top: 0;
 right: 0;
}

<div class="editable-area-wrapper">
    <button>Click</button>
    <span contenteditable="true">I'm editable</span>
</div>