有没有这样的前端组件？寻思许久，仍未发现合适的解决方案。

[Aegwynn]

• 一个文本域A，可以让用户输入任意文本内容；

• 一组标签/宏，用户通过点击或者拖拽，可以插入文本域A中的光标位置；

• 一个文本域B，可以同步预览A中的内容（因为A中有插入标签/宏，可以同步转换）

示例：

用户在A中输入：亲爱的客户姓名，你于申请时间通过申请方式提交了申请事项。

其中客户姓名，申请时间，申请方式，申请事项为标签/宏，是一个单独的label，中间无法插入。类似于淘宝、京东的搜索标签一样，右上方有个小x，可以随意去掉或者插入。

B中提供预览效果：亲爱的张三，你于2014年11月21日通过网上交易提交了认购申请。

标签/宏可以做一个mapping来达到预览的效果，但是文本A中插入和拖拽标签/宏，感觉还没有清晰的思路。本来打算通过iframe的方式嵌入div，label之类的，后来感觉太繁琐。

特来求助万能的v2ex，有没有类似的前端组件可以分享一下？

[DaniloSam]

LZ看一下富文本编辑器实现吧

[cornelia]

angularjs的双向绑定?

[tsingyi]

能不能这样?
```
<div>
<span contenteditable>亲爱的</span><label>张三</label><span contenteditable>, 你于</span><label>2014年11月21日</label><span contenteditable>通过</span><label>网上交易</label><span contenteditable>提交了</span><label>认购申请</label>
</div>
```

[kmvan]

自己写一个呗！

[jimwoo]

我觉得 ng 满足了!

[Aegwynn]

@tsingyi 这种方式太复杂
@kmvan 这不先看看有没有现成的轮子，没有的话再自己创造轮子么，节省时间
@DaniloSam 这个可以实现效果，但无法区分宏和普通文字
@jimwoo ng是什么？

[jimwoo]

@Aegwynn angular~哈哈

[tremblingblue]

早上刚用ng写了个内容局部高亮显示的input，不过你想要的label在编辑的时候比较麻烦，莫非用多个input来组成。。。

[akfish]

这很简单，本质上就是写一个template parser，A中渲染parser生成的AST，预览里渲染给parser传入数据后的生成结果。
比如可以定义语法：[[标签名]]
样例输入的纯文本表示就变成：亲爱的[[客户姓名]]，你于[[申请时间]]通过[[申请方式]]提交了[[申请事项]]
这样的parser可以通过正则式简单的实现，调用API形如：
```
var parser = new Parser();
var template = parser.parse(”亲爱的[[客户姓名]]，...");
```
template是一个token array：
```
[{type: text, data: "亲爱的"}, {type: label, name: "客户姓名" }...]
```

在A里面，你把这个array撸一遍，生成：
```
<span>亲爱的</span><span class="label">客户姓名</span>...
```

B里面的内容通过调用类似如下的API：
```
tempate.generate({"客户姓名": "akfish", ...})
```
简单的替换token array里的label token就能生成：
```
<span>亲爱的</span><span class="whatever">akfish</span>...
```

最核心的流程就是以上这些，剩下的CSS, JS交互神马的很容易。

[kingwrcy]

楼主要的是angularjs

[Aegwynn]

@tremblingblue 是的，高亮显示这都不是问题，关键是label
@akfish 单凭这么详细的回复，就该点个赞啊。通读下来，template解析很容易实现，但有个最关键的问题：宏的完整性，比如[[申请时间]]，这必须要是一个整体，避免误操作出现[[申请的时间]]这样的。

[akfish]

@Aegwynn 检查[[]]之间的标签名是否是在允许的列表内，不是的话要么报错，要么当做普通文本处理。
或者用户的输入都当做纯文本处理，不对用户暴露这一内部表示语法，只有用UI才能插入标签。
方法很多，就看你具体要怎么处理了。

[thonatos]

ng或者vue


vue.js
http://vuejs.org/

[14]

https://github.com/mbenford/ngTagsInput