开发者社区> 技术小美> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

简介:
+关注继续查看

这几天有个工作需求,就是在富文本输入区域(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);
复制代码

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+'&nbsp;</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行。

修改后效果

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

 

总结

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

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

 

本文为原创文章,转载请保留原出处,方便溯源,如有错误地方,谢谢指正。

本文地址 :http://www.cnblogs.com/lovesong/p/5769008.html

分类: 2.前端库

本文转自 海角在眼前 博客园博客,原文链接:   ,如需转载请自行联系原作者http://www.cnblogs.com/lovesong/p/5769008.html

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Select-or-Die:灵活的 jQuery 下拉列表插件
  Select-or-Die 是一个 jQuery 插件,用来自定义下拉列表(Select)元素。原生的下拉选择元素在各个浏览器的默认样式差异很多,而且自定义样式很困难,因此 Web 开发人员喜欢使用插件来模拟下拉选择功能。
610 0
jQuery插件实现图片墙小案例
jQuery插件实现图片墙小案例
0 0
【jquery Ajax】接口的学习与Postcode插件的使用
【jquery Ajax】接口的学习与Postcode插件的使用
0 0
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
DateTimePicket jQuery 日期插件,开始时间和结束时间示例
0 0
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
利用JQuery上传插件Uploadify实现图片上传MongoDB并预览
0 0
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
0 0
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
0 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
0 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载