Javascript 在Angular 2中的文本编辑器（使用Ckeditor）中添加标记字段

我正在使用模板在angular 2中开发一个应用程序，我想在文本编辑器中添加标记字段（使用CKEditor-标准4.6.0版本）

详细地-

我想通过单击事件将一个自定义标记（span、button、anywhere）添加到带有类似于十字按钮（x）的标记字段的编辑器中，因此如果用户想要删除，那么整个自定义标记将被删除，而不是删除自定义标记之间的任何字符

我曾尝试在单击事件上添加自定义标记，但编辑器会用段落标记擦除自定义标记。建议我任何方法来做同样的事情

上图是我的应用程序的屏幕截图，在点击“名称”按钮后，我想通过点击图片中可以看到的按钮添加一个令牌字段

这是我的密码， 组件技术

tagClick(name){
    this.model.template += '<button type="button" class="btn btn-success">' + name + '</button>';
  }

tagClick（名称）{
this.model.template+=''+name+''；
}

模板

<button class="btn" type="button" (click)="tagClick(name)" >{{name}}</button>
<ckeditor [(ngModel)]="model.template" name="template" [config]="config"></ckeditor>

{{name}

您是否尝试过这样做但失败了？什么零件起作用了？哪些部件不起作用？这个问题读起来不像一个问题，它读起来像一个需求列表。另外，不要为未使用的框架添加标签。Angularjs和Angular2不是同一个框架。现在@Claies可以了吗？你有没有显示点击事件的代码？我只是在编辑器的内容中添加标签，等等，我也会分享@克莱斯