Javascript 单击按钮时向现有输入字段添加文本

我正在创建一个网站，网站管理员将定期发布文章（很像博客）。作为一名管理员，我可以轻松地编写一个基本的HTML文档，但其他管理员根本不熟悉HTML

我有一个表单，他们将使用该表单发布文章，其中包含作者、标题和内容字段。我目前正在使用“内容”字段，并在提交表单后将其显示为HTML。为了帮助其他用户，我添加了“标题”、“段落”、“图像”和“换行”按钮。单击这些按钮时，我希望将html标记添加到现有字段（通常已填充文章文本）

这个想法是：

我单击段落按钮，我的字段显示： “

在此处键入

”。 然后我键入该段落并转到新的一行。我决定在其后面添加一个子标题，然后单击标题按钮：

<p>I replaced the text</p>
<h3>type sub-heading here</h3>

我替换了文本

在此处键入副标题

我不希望按钮以任何方式创建新的输入或添加到表单中。我也不希望它替换或重置那里的文本，而只是在光标所在的位置添加文本。我已经找到了很多方法来添加表单字段、替换表单字段、隐藏表单字段等等，但是我找不到任何关于用按钮编辑现有文本的帖子

有人知道我怎么做吗？我使用angular 2作为框架，因此任何适合它的解决方案（javascript、typescript、angular 2数据绑定等）都可以工作

这是我的HTML：

<div class="edit-article">
  <h2 *ngIf="isEdit">Edit an Article</h2>
  <h2 *ngIf="!isEdit">Add an Article</h2>
  <div class="input-group">
    <label for="title">Title</label>
    <input mdInput id="title" type="text" [(ngModel)]="title">

    <label for="author">Author</label>
    <input mdInput id="author" type="text" [(ngModel)]="author">

    <label for="article-content">Content</label>
    <input mdInput id="article-content" type="textarea" class="multi-line-input" [(ngModel)]="content">
  </div>
  <div class="button-group left">
    <button class="button secondary" (click)='onAddHeader()'>Header</button>
    <button class="button secondary" (click)='onAddParagraph()'>Paragraph</button>
    <button class="button secondary" (click)='onAddImage()'>Image</button>
  </div>
  <div class="button-group right">
    <button class="button primary" (click)="onSaveArticle()">Save</button>

编辑文章
添加文章
标题
作者
内容
标题
段落
形象
拯救

TS文件：

export class ArticleEditComponent {
  isEdit = false;

  public title: string;
  public author: string;
  public content: string;

  constructor(
    public dialogRef: MdDialogRef<any>, @Inject(MD_DIALOG_DATA) private dialogData: any,
    public afAuth: AngularFireAuth, public afDB: AngularFireDatabase,
    public articleService: ArticleService) {
  }

  onSaveArticle() {
    this.articleService.createArticle(new Article(
    this.title, this.author, this.content));
  }

onAddHeader(){
    document.getElementById("article-content").innerText += '<h3></h3>';
    console.log('running header function');
  }

  onAddImage(){
    document.getElementById("article-content").innerText += 'add image tag';
    console.log('running header function');
  }

  onAddParagraph(){
    document.getElementById("article-content").innerText += '<p></p>';
    console.log('running header function');
  }

导出类ArticleEditComponent{
isEdit=假；
公共标题：字符串；
公共作者：string；
公共内容：字符串；
建造师(
public dialogRef:MdDialogRef，@Inject（MD_DIALOG_DATA）private dialogData:any，
公共afAuth:AngularFireAuth，公共afDB:AngularFireDatabase，
公共物品服务：物品服务）{
}
onSaveArticle（）{
this.articleService.createArticle（新文章(
this.title，this.author，this.content）；
}
onAddHeader（）{
document.getElementById（“文章内容”）.innerText+=''；
log（'running header function'）；
}
onAddImage（）{
document.getElementById（“文章内容”）.innerText+=“添加图像标签”；
log（'running header function'）；
}
第（）段{
document.getElementById（“文章内容”）.innerText+='
'；
log（'running header function'）；
}

如果您使用的是ngModel，则相应输入字段中的内容将绑定到您列出的变量

<input mdInput id="title" type="text" [(ngModel)]="title">

用户类型的任何内容都将绑定到上述输入中的“title”变量，您可以在组件或模板中的任何位置修改该变量，并将其反映在视图中。因此，如果您只想向输入字段添加文本，可以执行以下操作：

<button class="button secondary" (click)="title = '<p> type here </p>' + title">Paragraph</button>

段落

也可以在组件代码中执行此操作

<button class="button secondary" (click)="addText()">Paragraph</button>


 ...somewhere in your component....

addText() {
   f.title = '<p> type here </p>' + f.title;
}

段落
…组件中的某个地方。。。。
addText（）{
f、 title='在此处键入
'+f.title；
}

（以上假设您已将表单包装在ngForm组中，并为其指定标识符#f，就像他们在此处所做的那样：）

该方法会将该文本添加到标题输入字段中已存在的内容的开头（注意：您可能必须转义该反斜杠，我不记得了）。您根本不需要使用document.getElementById查询。在Angular中最好避免这些查询。如果您使用的是ngModel，您也不需要访问innerText属性。双向绑定的美妙之处在于它基本上已经以“title”变量的形式为您提供了innerText属性。事实上，访问文档对象和nativeElement属性几乎总是可以避免的，并且应该尽可能避免

---

如果还没有，您可能需要从“@angular/forms”导入NgForm。如果没有它，我不记得ngModel是否可以正常工作。

以下是一个您可以调整的示例：

HTML:

<input #input type="text">
<button (click)="addText()">Click me to add some text</button>
<button (click)="reset()">Reset</button>

  @ViewChild('input') private input;

  addText(){
    this.input.nativeElement.focus();
    let startPos = this.input.nativeElement.selectionStart;
    let value = this.input.nativeElement.value;
    this.input.nativeElement.value= 
    value.substring(0, startPos) +' I am inserted ' + value.substring(startPos, value.length)
  }

  reset(){
      this.input.nativeElement.value='';
  }

---

回答太棒了。我简直不敢相信我没有想到要编辑我将表单绑定到的变量。我只是这样做了，效果非常好。我使用了您显示的第二种方法。当我单击按钮时，我更改了“this.content”添加标记。我确实检查了这一点，它起到了作用，但是对于angular 2项目，使用angular数据绑定的另一个答案非常简单，代码也少了很多。这一点很好。另一种方法只添加到末尾，而不是光标处。出于这个原因，这种方法很好。如果输入字段和按钮由tw呈现，如何使用这种解决方案o不同的组件？在本例中，#输入是未定义的。@Tanmoy Bhattacharjee，您是指input.focus（）？将其移动到代码。您已经有了通过ViewChild的引用。我有两个组件。一个组件有输入，另一个组件有按钮现在我有按钮的组件我已将代码移动到.ts，但它仍然是未定义的html输入：html:单击我！！.ts:@ViewChild（'input'）私有输入；addText（事件）{console.log（this.input）；//这是未定义的}