jQuery弹出下拉列表插件(实现kindeditor的@功能)


Posted in Javascript onAugust 16, 2016

这几天有个工作需求,就是在富文本输入区域(kindeditor)可以有@功能,能够容易提示用户名的(像在qq群组@人一样)。在网上找了一个叫bootstrap-suggest的插件,却不能满足我的需求,于是我决定在该插件上改良,主要是下面几点:

1. @内容的输入,能够匹配多个属性值。

2. 选中列表值后,是成块插入kindeditor的(方便删除,也利于区分文本)。

3. 修正输入偶数关键字@功能失效问题。

前言

在一开始,我用bootstrap-suggest(https://github.com/lodev09/bootstrap-suggest),这个插件能够实现以下效果。

jQuery弹出下拉列表插件(实现kindeditor的@功能)

但是我发觉有几个问题:

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);

PS:在170行。

2. 替换选择值

将@后面的输入内容删除(包含@),然后插入一个完整的标签(选择值),还要保证光标位置正确。

var dType = !!el.cmd.range.startContainer.data ? "data" : "innerHTML"; //这个取值最关键
var sVal = el.cmd.range.startContainer[dType];
var lAt = sVal.lastIndexOf(this.key);
el.cmd.range.startContainer[dType] = sVal.substring(0, lAt) ;
el.insertHtml("<span contenteditable='false'>"+this.key+item.value+' </span>' +'<span id="input-textarea-caret-position-mirror-span">.</span>');
var span = el.edit.doc
.getElementById('input-textarea-caret-position-mirror-span'); 
var range = el.edit.doc.createRange();
range.selectNodeContents(span);
range.collapse(false);
var sel = el.edit.win.getSelection();
sel.removeAllRanges();
sel.addRange(range); //hack:修正下一次startOffset
span.parentNode.removeChild(span);

PS:在442行。

修改后效果

内容是富文本输入区域,插入的成块文本。

jQuery弹出下拉列表插件(实现kindeditor的@功能)

总结

虽然是基于他人的插件,但我在修复问题上也花费了很多心思,之前一直发现没有精确针对kindeditord @功能的插件,所以我就自己弄了下。

我把源代码放在Github上了,有需要的可去下:https://github.com/codingforme/jquery-kindeditor-suggest

以上所述是小编给大家介绍的jQuery弹出下拉列表插件(实现kindeditor的@功能),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS backgroundImage控制
May 19 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javascript图片延迟加载实现方法及思路
Dec 31 Javascript
JavaScript入门系列之知识点总结
Mar 24 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
npm qs模块使用详解
Feb 07 Javascript
微信小程序实现左滑删除效果
Nov 18 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 #Javascript
解决wx.onMenuShareTimeline出现的问题
Aug 16 #Javascript
JavaScript里 ==与===区别详解
Aug 16 #Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 #Javascript
总结javascript中的六种迭代器
Aug 16 #Javascript
你知道setTimeout是如何运行的吗?
Aug 16 #Javascript
深入理解(function(){... })();
Aug 16 #Javascript
You might like
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
js window.onload 加载多个函数和追加函数详解
2014/01/08 Javascript
jquery移动节点实例
2015/01/14 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
webpack源码之loader机制详解
2018/04/06 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
详解vue 不同环境配置不同的打包命令
2019/04/07 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
Python信息抽取之乱码解决办法
2017/06/29 Python
Python+Turtle动态绘制一棵树实例分享
2018/01/16 Python
django rest framework 数据的查找、过滤、排序的示例
2018/06/25 Python
浅析python参数的知识点
2018/12/10 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python实现图片转字符画的代码实例
2019/02/22 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python_mask_array的用法
2020/02/18 Python
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
naturalizer加拿大官网:美国娜然女鞋
2017/04/04 全球购物
大学生个人求职信范文
2013/09/21 职场文书
新年抽奖获奖感言
2014/03/02 职场文书
诚信考试倡议书
2014/04/15 职场文书
《蚕姑娘》教学反思
2014/04/15 职场文书
推普周活动总结
2014/08/28 职场文书
课内比教学心得体会
2014/09/09 职场文书
党员剖析材料范文
2014/09/30 职场文书
太空授课观后感
2015/06/17 职场文书
2015年征兵工作总结
2015/07/23 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
比较node.js和Deno
2021/04/27 Javascript