Question

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

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

这个想法是这样的：

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

<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');
  }

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属性。实际上，访问文档对象和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>

<强>打字稿：

  @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

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

2 个答案: