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 相关文章推荐
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
Feb 03 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
js数字转换为float,取N位小数
Feb 08 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
Express + Node.js实现登录拦截器的实例代码
Jul 01 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
vue cli 3.0 使用全过程解析
Jun 14 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 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
php代码书写习惯优化小结
2013/06/20 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
PHP连接MSSQL时nvarchar字段长度被截断为255的解决方法
2014/12/25 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
纯JS实现表单验证实例
2016/12/24 Javascript
详解用node.js实现简单的反向代理
2017/06/26 Javascript
jquery+css实现下拉列表功能
2017/09/03 jQuery
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
在实例中重学JavaScript事件循环
2020/12/03 Javascript
Python读写Excel文件方法介绍
2014/11/22 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python第三方库的安装方法总结
2016/06/06 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
荷兰电脑专场:Paradigit
2018/05/05 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
单位介绍信范文
2014/01/18 职场文书
工艺员岗位职责
2014/02/11 职场文书
分层教学实施方案
2014/03/19 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
意向协议书
2015/01/27 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
初中团委工作总结
2015/08/13 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL