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

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 数据绑定(bind)等)都可以使用。

这是我的 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