我从接口拿到的数据是一个普通的html模板(带样式),现在我用angular4开发的项目,我想把这段html显示到界面上,然后用户可以编辑这段html的一些内容,假如从接口的数据如下:
<div class="container">
<div class="thumbnail" style="width:100px;height:200px">
<img src="../xxx/xxx.png" alt="" style="width:100%">
</div>
<h1 class=title>大宝五折起</h1>
<p class="desc">双11大促销</p>
<div class="tag">
<span>双11</span>
<span>促销</span>
<span>五折</span>
</div>
</div>
现在我要把这段html显示到页面的工具栏,当用户点击这个html的时候,这段html模板就会被复制到编辑区域,并且变的可编辑(angular4模板)
<div class="container">
<div class="thumbnail" style="width:100px;height:200px">
<img src="../xxx/xxx.png" alt="" style="width:100%">
</div>
<h1 class=title>{{title}}</h1>
<p class="desc">{{desc}}</p>
<div class="tag">
<ng-container *ngFor="let tag of tags">
<span>tag.name</span>
<ng-container/>
</div>
</div>
这样用户编辑相应的字段名字,编辑区的文本内容也会随着改变。不知道我描述清楚没有,求各位大神提供下思路。
上一个大致的图:点击工具栏模板,预览区会出现同样一个模板,在编辑区编辑模板的属性,预览区会跟着变化
参考https://github.com/KhaledSMQ/...