单击按钮将文本添加到现有输入字段 [英] Add Text to an Existing Input Field on Button Click

问题描述

我正在创建一个网站，该网站上的管理员将定期发布文章(很像博客).作为管理员，我可以轻松编写基本的HTML文档，但其他管理员对HTML一点都不熟悉.

I am creating a site where admins on the site will routinely post articles (much like a blog). I as an admin can write a basic HTML document easily, but the other admins are not at all familiar with HTML.

我有一种表格，他们将使用其发布带有作者，标题和内容字段的文章.我目前正在使用内容"字段，并在提交表单后将其显示为HTML.为了帮助其他用户，我添加了表示标题"，段落"，图像"和换行"的按钮.单击这些按钮时，我想将html标签添加到现有字段(通常已经填充了文章文本).

I have a form that they will use to publish their articles with author, title, and content fields. I am currently taking the 'content' field and displaying it as HTML after the form is submitted. To help the other users I have added buttons that say "header", "paragraph", "image", and "line break". When these buttons are clicked I would like to add html tags to the existing field (usually already filled with article text).

想法是这样的:

我单击段落按钮，我的字段显示为: "<p>type here</p>". 然后，我键入该段落并转到新行.我决定在其后添加一个子标题，然后单击标题按钮:

I click the paragraph button and my field shows this: "<p>type here</p>". I then type the paragraph and go to a new line. I decide to add a sub heading after it and click the heading button:

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

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

I don't want the button to create a new input or add to the form in any way. I also don't want it to replace or reset the text that is there, but simply add text where the cursor is located. I've found plenty of methods to add form fields, replace them, hide them, etc, but can't dig up any posts about editing existing text with a button.

有人知道我该怎么做吗?我正在使用angular 2作为框架，因此任何适合它的解决方案(javascript，打字稿，angular 2数据绑定等)都可以使用.

Anyone know how I can do this? I am using angular 2 as a framework, so any solution that fits with it (javascript, typescript, angular 2 data binding, etc) will work.

这是我的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');
  }

推荐答案

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

The following is an example that you could adapt:

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

这篇关于单击按钮将文本添加到现有输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！