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中的浮点型运算问题
Jan 06 Javascript
借助JavaScript脚本判断浏览器Flash Player信息的方法
Jul 09 Javascript
javascript获取当前鼠标坐标的方法
Jan 10 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
jQuery模拟黑客帝国矩阵效果实例
Jun 28 Javascript
javascript中判断json的方法总结
Aug 27 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
Vue组件tree实现树形菜单
Apr 13 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
javascript简单实现深浅拷贝过程详解
Oct 08 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中用文本文件做数据库的实现方法
2008/03/27 PHP
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
php根据某字段对多维数组进行排序的方法
2015/03/07 PHP
php去掉文件前几行的方法
2015/07/29 PHP
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
Highcharts使用简例及异步动态读取数据
2015/12/30 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
BootStrap实现文件上传并带有进度条效果
2017/09/11 Javascript
JS实现的邮箱提示补全效果示例
2018/01/30 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
2018/09/20 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
基于p5.js 2D图像接口的扩展(交互实现)
2020/11/30 Javascript
python list 合并连接字符串的方法
2013/03/09 Python
Python SQLite3数据库操作类分享
2014/06/10 Python
Python version 2.7 required, which was not found in the registry
2014/08/26 Python
用Python脚本来删除指定容量以上的文件的教程
2015/05/04 Python
Centos Python2 升级到Python3的简单实现
2016/06/21 Python
Python字典创建 遍历 添加等实用基础操作技巧
2018/09/13 Python
python各层级目录下import方法代码实例
2020/01/20 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
Python异常处理机制结构实例解析
2020/07/23 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
详解HTML5中的Communication API基本使用方法
2016/01/29 HTML / CSS
北大自主招生自荐信
2013/10/19 职场文书
满月酒答谢词
2014/01/14 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
关于ObjectUtils.isEmpty() 和 null 的区别
2022/02/28 Java/Android