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

问题描述

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

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

想法是这样的:

我点击段落按钮，我的字段显示:

在这里输入

".然后我输入段落并转到新行.我决定在它后面添加一个子标题并单击标题按钮:

<p>我替换了文字</p><h3>在此处输入子标题</h3>

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

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

这是我的 HTML:

<h2 *ngIf="isEdit">编辑文章</h2><h2 *ngIf="!isEdit">添加文章</h2><div class="input-group"><label for="title">标题</label><input mdInput id="title" type="text" [(ngModel)]="title"><label for="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 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 class="button-group right"><button class="button primary" (click)="onSaveArticle()">保存</button>

TS 文件:

导出类 ArticleEditComponent {isEdit = false;公共标题:字符串；公共作者:字符串；公开内容:字符串；构造函数(public dialogRef: MdDialogRef, @Inject(MD_DIALOG_DATA) private dialogData: any,公共 afAuth:AngularFireAuth，公共 afDB:AngularFireDatabase，公共文章服务:文章服务){}onSaveArticle() {this.articleService.createArticle(新文章(this.title, this.author, this.content));}onAddHeader(){document.getElementById("article-content").innerText += '<h3></h3>';console.log('运行头函数');}onAddImage(){document.getElementById("article-content").innerText += '添加图片标签';console.log('运行头函数');}onAddParagraph(){document.getElementById("article-content").innerText += '<p></p>';console.log('运行头函数');}

解决方案

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

HTML:

<button (click)="addText()">点击我添加一些文本</button><button(点击)="reset()">重置</button>

打字稿:

 @ViewChild('input') 私有输入；添加文字(){this.input.nativeElement.focus();让 startPos = this.input.nativeElement.selectionStart;让值 = this.input.nativeElement.value;this.input.nativeElement.value=value.substring(0, startPos) +' 我被插入 ' + value.substring(startPos, value.length)}重启(){this.input.nativeElement.value='';}

Plunker

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.

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).

The idea is this:

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.

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.

Here is my 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 file:

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屋！