一个文本域A,可以让用户输入任意文本内容;
一组标签/宏,用户通过点击或者拖拽,可以插入文本域A中的光标位置;
一个文本域B,可以同步预览A中的内容(因为A中有插入标签/宏,可以同步转换)
示例:
用户在A中输入:亲爱的客户姓名,你于申请时间通过申请方式提交了申请事项。
其中客户姓名
,申请时间
,申请方式
,申请事项
为标签/宏,是一个单独的label,中间无法插入。类似于淘宝、京东的搜索标签一样,右上方有个小x,可以随意去掉或者插入。
B中提供预览效果:亲爱的张三,你于2014年11月21日通过网上交易提交了认购申请。
标签/宏可以做一个mapping来达到预览的效果,但是文本A中插入和拖拽标签/宏,感觉还没有清晰的思路。本来打算通过iframe的方式嵌入div,label之类的,后来感觉太繁琐。
特来求助万能的v2ex,有没有类似的前端组件可以分享一下?
1
DaniloSam 2014-11-21 11:50:25 +08:00
LZ看一下富文本编辑器实现吧
|
2
cornelia 2014-11-21 11:51:20 +08:00
angularjs的双向绑定?
|
3
tsingyi 2014-11-21 11:51:44 +08:00
能不能这样?
``` <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> ``` |
4
kmvan 2014-11-21 11:53:16 +08:00 via Android
自己写一个呗!
|
5
jimwoo 2014-11-21 12:34:25 +08:00
我觉得 ng 满足了!
|
6
Aegwynn OP |
8
tremblingblue 2014-11-21 14:06:50 +08:00
早上刚用ng写了个内容局部高亮显示的input,不过你想要的label在编辑的时候比较麻烦,莫非用多个input来组成。。。
|
9
akfish 2014-11-21 14:22:50 +08:00
这很简单,本质上就是写一个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交互神马的很容易。 |
10
kingwrcy 2014-11-21 14:25:44 +08:00
楼主要的是angularjs
|
11
Aegwynn OP @tremblingblue 是的,高亮显示这都不是问题,关键是label
@akfish 单凭这么详细的回复,就该点个赞啊。通读下来,template解析很容易实现,但有个最关键的问题:宏的完整性,比如[[申请时间]],这必须要是一个整体,避免误操作出现[[申请的时间]]这样的。 |
12
akfish 2014-11-21 16:08:09 +08:00
@Aegwynn 检查[[]]之间的标签名是否是在允许的列表内,不是的话要么报错,要么当做普通文本处理。
或者用户的输入都当做纯文本处理,不对用户暴露这一内部表示语法,只有用UI才能插入标签。 方法很多,就看你具体要怎么处理了。 |
13
thonatos 2014-11-21 17:28:16 +08:00
|
14
14 2014-11-22 17:20:22 +08:00
|