这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样)。在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点:1. @内容的输入,能够匹配多个属性 ...
这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样)。在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点:
1. @内容的输入,能够匹配多个属性值。
2. 选中列表值后,是成块插入kindeditor的(方便删除,也利于区分文本)。
3. 修正输入偶数关键字@功能失效问题。
前言
在一开始,我用bootstrap-suggest(https://github.com/lodev09/bootstrap-suggest),这个插件能够实现以下效果。
1. 只能单一匹配(可能存在需要匹配拼音或中文)。
2. 偶数位的@功能会失效。
3. 选取值后,只是简单文本(没有qq一样那种成块效果)。
jquery-kindeditor-suggest
由于我不想重复造轮子,于是决定在上面插件做调整,以满足我的需求,有几个关键地方需说明。
1. startOffset取值错误问题。
如果使用了KindEditor的insertHTML,会导致下一次startOffset取值出错。原插件在获取光标位置(top,left)时,会需要插入一个span去获取,在获取完后删除,但是这时候下一次editor.cmd.range.startOffset;就出错。
于是我修改了插入的方式:
var doc = editor.cmd.range.doc, range = editor.cmd.range, frag = doc.createDocumentFragment();KindEditor('@<span id="input-textarea-caret-position-mirror-span">.</span>' , doc).each(function() { frag.appendChild(this);});range.deleteContents();range.insertNode(frag);range.collapse(false);
原标题:jquery弹出下拉列表插件(实现kindeditor的@功能)
关键词:jquery
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。