单击按钮将文本添加到现有输入字段

Question

我正在创建一个站点，该站点的管理员将定期 post 文章（很像博客）。我作为管理员可以轻松编写基本的 HTML 文档，但其他管理员对 HTML.

一点都不熟悉

我有一个表单，他们将使用该表单发布带有作者、标题和内容字段的文章。我目前正在使用 'content' 字段并在提交表单后将其显示为 HTML。为了帮助其他用户，我添加了 "header"、"paragraph"、"image" 和 "line break" 按钮。单击这些按钮后，我想将 html 标记添加到现有字段（通常已经填充了文章文本）。

思路是这样的：

我单击段落按钮，我的字段显示如下： “<p>type here</p>”。然后我键入该段落并换行。我决定在它后面添加一个子标题，然后单击标题按钮：

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

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

有人知道我该怎么做吗？我正在使用 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');
  }

Answer 1

如果您使用的是 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;
}

（以上假设您已将表单包装在一个 ngForm 组中，并为其指定标识符 #f ，正如他们在此处所做的那样：https://angular.io/api/forms/NgForm）

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

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

Answer 2

以下是您可以改编的示例：

HTML:

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

TypeScript:

  @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='';
  }

Plunker

单击按钮将文本添加到现有输入字段

Add Text to an Existing Input Field on Button Click

html

javascript

forms

angular2-forms

angular