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

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

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

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