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

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

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

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.

谁知道我怎么做到这一点？我使用角度2作为框架，因此任何适合它的解决方案（javascript，typescript，angular 2数据绑定等）都可以。

Here is my HTML:

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

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

2 个解决方案

#1

The following is an example that you could adapt:

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

HTML:

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

Plunker

#2

If you're using ngModel, the contents of whatever is in the corresponding input field will be bound to the variable you have listed.

如果您正在使用ngModel，则相应输入字段中的内容将绑定到您列出的变量。

<input mdInput id="title" type="text" [(ngModel)]="title">

Anything the user types will be bound to the "title" variable in the above input, and you can modify that variable anywhere in your component or template and it will be reflected in the view. So if you just wanted to add text to the input field, you could do something like:

用户键入的任何内容都将绑定到上述输入中的“title”变量，您可以在组件或模板中的任何位置修改该变量，它将反映在视图中。因此，如果您只想在输入字段中添加文本，则可以执行以下操作：

<button class="button secondary" (click)="title = '<p> type here </p>' + title">Paragraph</button>

or you could do it in the component code

或者您可以在组件代码中执行此操作

<button class="button secondary" (click)="addText()">Paragraph</button>


 ...somewhere in your component....

addText() {
   f.title = '<p> type here </p>' + f.title;
}

(The above is assuming you have wrapped your form in an ngForm group, and given it the identifier #f , as they have done here: https://angular.io/api/forms/NgForm )

（以上假设您已将表单包装在ngForm组中，并为其指定了标识符#f，如下所示：https：//angular.io/api/forms/NgForm）

That method will add that text to the beginning of whatever is already in the title input field (note: you may have to escape that backslash, I can't remember). You shouldn't need to use the document.getElementById queries at all. Those are best avoided in Angular. And you shouldn't really need to access the innerText attribute either, if you're using ngModel. The beauty of 2-way binding is its basically already giving you that innerText attribute in the form of the 'title' variable. In fact, accessing the document object and nativeElement properties can almost always be avoided and should whenever possible.

该方法将该文本添加到标题输入字段中已有的任何内容的开头（注意：您可能必须转义该反斜杠，我不记得了）。您根本不需要使用document.getElementById查询。在Angular中最好避免使用它们。如果你正在使用ngModel，你也不应该真正需要访问innerText属性。双向绑定的优点在于它基本上已经以'title'变量的形式为您提供了innerText属性。事实上，几乎总是可以避免访问文档对象和nativeElement属性，并且应该尽可能地。

You may need to import NgForm from '@angular/forms' if you haven't already. I can't remember if ngModel works properly without it.

如果你还没有，你可能需要从'@ angular / forms'导入NgForm。我不记得ngModel在没有它的情况下是否正常工作。