美文网首页
ueditor-WEB端模仿QQ、微信群发功能@之操作开发

ueditor-WEB端模仿QQ、微信群发功能@之操作开发

作者: 冯嘉辉的周刊 | 来源:发表于2019-06-12 15:49 被阅读0次

    功能分析:百度编辑器内改编(加)https://ueditor.baidu.com/website/onlinedemo.html?qq-pf-to=pcqq.c2c

    1.监听百度编辑器 判断操作系统的键盘输入值 @ 然后获取编辑器内容(延时获取)。

    2.追加一个隐藏框,JSON数据(远程获取),实现QQ、微信群发功能@群发功能。

    3.需要获取js获取光标原理,JS DOM对象 节点光标(结合文本功能开发)

    4.选取文本的内容,制作php录入mysql时候 发送邮件功能和短信功能(php缓冲带功能或者php控制器,model抽选发送)

    5.功能完成

    详解第一步:

    当前编辑器内默认的监听事件

    找个这个文件的这个地方,接下来我们要进行 键盘监控的操作:

    监听编辑器的内置键盘值(单个操作,不使用组合键),组合键会带来不可避免的动态语言漏洞

    当我们监听到了这几个键值,这是要监听编辑器的文本是否存在@字符串,然后做好一些列的高操作,这里我使用原生JS DOM对象+window对象和部分JQ代码混写:

    这里是当我监听到@键(英文状态)即可出现 基于最外层body的div人员 这个是当@出现时 利用编辑器的光标位置 + body的xy轴定位拿到的body层子div显示窗 这一部分是body的外层div 也是JSON获取的数据渲染人员显示

    ok完成上面几步操作,已经完成了@功能的百分之60,接下来要完成百分之20的操作,整体的百分之20操作视为一个js文件,外接入。所需要的技术是 DOM的键盘和鼠标的点击操作。都是采用监听的功能。

    功能详解 以上截图就是整体的百分之20,那么我的功能已经完成百分之80,剩下的功能都由动态语言操作了。

    以下是我的功能展示(默认显示和全屏功能,对了 全屏功能自己根据 监听部分自己找到对应的全屏按钮 新建对应的window对象判断就可以了)好的,后面我可能会继续带入更多的百度编辑器中的奇葩的功能,已完成业务员中最简单的操作。同样的操作适合其它的WEB端编辑器开发。

    相关文章

      网友评论

          本文标题:ueditor-WEB端模仿QQ、微信群发功能@之操作开发

          本文链接:https://www.haomeiwen.com/subject/yrtkfctx.html