图形验证插件,百度编辑器拓展功能,NodeJs消息机制以及聊天室
图形验证插件
网上找了很多图形验证插件,比较推荐verify.js
<link rel="stylesheet" type="text/css" href="css/verify.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/verify.js"></script>
<div id="mpanel4"></div>
<script type="text/javascript">
$('#mpanel4').slideVerify({
type: 2,
vOffset: 5,
vSpace: 5,
imgName: ['1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg', '6.jpg', '7.jpg', '8.jpg'],
imgSize: {
width: '400px',
height: '200px',
},
blockSize: {
width: '40px',
height: '40px',
},
barSize: {
width: '400px',
height: '40px',
},
ready: function () {},
success: function () {
$(".verify-left-bar .verify-msg").html('成功');
$(".verify-left-bar .verify-msg").css('color','#5cb85c');
},
error: function () {}
});
</script>
百度编辑器拓展功能
红框内就是自定义的功能
引入百度编辑器后
ueditor.all.js
//为工具栏添加按钮,以下都是统一的按钮触发命令,所以写在一起
var btnCmds = ['translation《--这是你新加的功能','undo', 'redo', 'formatmatch',
'bold', 'italic', 'underline', 'fontborder', 'touppercase', 'tolowercase',
'strikethrough', 'subscript', 'superscript', 'source', 'indent', 'outdent',
'blockquote', 'pasteplain', 'pagebreak',
'selectall', 'print','horizontal', 'removeformat', 'time', 'date', 'unlink',
'insertparagraphbeforetable', 'insertrow', 'insertcol', 'mergeright', 'mergedown', 'deleterow',
'deletecol', 'splittorows', 'splittocols', 'splittocells', 'mergecells', 'deletetable', 'drafts'];
ueditor.config.js
, toolbars: [['translation《--和上面保持一样的名字', '|',
'fullscreen', 'source', '|', 'undo', 'redo', '|',
'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
'directionalityltr', 'directionalityrtl', 'indent', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|',
'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|',
'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|',
'print', 'preview', 'searchreplace', 'drafts', 'help'
]]
//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置,否则以配置值为准
//,labelMap:{
// 'anchor':'', 'undo':''
//}
, labelMap: {
'translation': '翻译《--鼠标放上去的提示'
}
在初始化编辑器之前增加命令
UE.commands['translation'] = { execCommand: function () {
var translation = UE.getEditor(this.key);//富文本
点击后触发的事件
},
queryCommandState: function () { }
}; var ue = UE.getEditor('editor');
效果,我再百度编辑器上新增的翻译功能
NodeJs 做聊天室
NodeJs 可以在服务器上运行,做JS的服务端。与客户端NodeJs 保持长连接。业务上可以做及时沟通。
引用socket.io.js
服务端代码:
var httpd = require('http').createServer(handler);
var io = require('socket.io').listen(httpd);
var fs = require('fs');
引用三个比较关键的资源
httpd.listen(3000);
监听3000端口,一般是8077.。。
function handler(req, res) {
fs.readFile(__dirname + '/index.html',
function(err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
} res.writeHead(200);
res.end(data);
}
);
}
创建HTTP链接
io.sockets.on('connection', function (socket) {
socket.on('clientMessage', function(content) {
socket.emit('serverMessage', 'You said: ' + content);
var username = null; if (socket.username) {
username = socket.username;
}
socket.broadcast.emit('serverMessage', username + ' said: ' +
content);
}); socket.on('login', function(username) {
socket.username = username;
socket.emit('serverMessage', 'Currently logged in as ' + username);
socket.broadcast.emit('serverMessage', 'User ' + username +
' logged in');
}); socket.emit('login'); });
以上是NodeJs服务端相应事件的主体代码
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script type="text/javascript">
var messagesElement = document.getElementById('messages');
var lastMessageElement = null;
var id = 1;
function addMessage(message) {
var newMessageElement = document.createElement('div');
var newMessageText = document.createTextNode(message); newMessageElement.appendChild(newMessageText);
messagesElement.insertBefore(newMessageElement,
lastMessageElement);
lastMessageElement = newMessageElement;
} var socket = io.connect('http://localhost:3000');
socket.on('serverMessage', function (content,id) {
addMessage(content+id );
}); socket.on('login', function () {
var username = prompt('What username would you like to use?');
socket.emit('login', username);
}); var inputElement = document.getElementById('input'); inputElement.onkeydown = function (keyboardEvent) {
if (keyboardEvent.keyCode === 13) {
socket.emit('clientMessage', inputElement.value,'11');
inputElement.value = '';
return false;
} else {
return true;
}
};
</script>
以上是客户端相应事件的主体代码
接下来说下消息机制吧
客户端 var socket = io.connect('http://localhost:3000');
服务端 io.sockets.on('connection', function (socket) {
}
只要没报500,就说明连接正常,这时候客户端可以主动向服务端推送消息,服务端也可以像客户端推送消息。
socket.on('login', function (content) { socket.emit('serverMessage', '单方面回复非广播' + content); socket.broadcast.emit('serverMessage', '全部回复广播' + content)
})
socket.emit('login');
服务端定义了用户登录,并在连接成功后主动发起Login请求
socket.on('login', function () {
var username = prompt('What username would you like to use?');
socket.emit('login', username);
});
客户端响应服务端Login 传入登录的用户名
服务端 以 serverMessage 单方面响应请求的客户端机器(非所有客户端机器),broadcast 广播除请求客户端机器以外的所有机器
客户端响应服务端 serverMessage
socket.on('serverMessage', function (content,id) {
addMessage(content+id );
});
将消息加入Html中展示,完成服务端端主动推送消息机制
inputElement.onkeydown = function (keyboardEvent) {
if (keyboardEvent.keyCode === 13) {
socket.emit('clientMessage', inputElement.value,'11');
客户端文本框写入消息并摁下回车,响应clientMessage
socket.on('clientMessage', function (content,id) {
socket.emit('serverMessage', '单方面回复非广播' + content ,id); socket.broadcast.emit('serverMessage', '全部回复广播' + content) })
服务端响应clientMessage,并以serverMessage回应请求客户端IP,broadcast回应其他客户端IP.完成客户端主动推送消息机制
图形验证插件,百度编辑器拓展功能,NodeJs消息机制以及聊天室的更多相关文章
- Asp.NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)
简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...
- Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)
简介 ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端 ...
- 原生NodeJs制作一个简易聊天室
准备工作 安装NodeJs环境 安装编译器Sublime 如果网速不理想,可以百度一下如何加快npm的速度~ 使用node搭建一个简单的网站后台 做完准备工作之后,新建文件夹chatroom,在cha ...
- 基于 NodeJs 打造 Web 在线聊天室
Socket.IO 简介与基础环境搭建 任务时间:10min ~ 20min 关于 Socket.IO Socket.IO 可以实现在浏览器和服务器之间实时双向通信,本节课程将详细介绍 Socket. ...
- Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)
ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及 ...
- 百度编辑器(UEditor)自定义工具栏
百度编辑器(UEditor)自定义工具栏的自定义 百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档! 百度编辑器默认配置展示界面 如何 ...
- ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(四) 添加表情、群聊功能
休息了两天,还是决定把这个尾巴给收了.本篇是最后一篇,也算是草草收尾吧.今天要加上表情功能和群聊.基本上就差不多了,其他功能,读者可以自行扩展或者优化.至于我写的代码方面,自己也没去重构.好的,我们开 ...
- jquery validate表单验证插件的基本使用方法及功能拓展
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...
- 一步步开发自己的博客 .NET版(4、文章发布功能)百度编辑器
前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做个插件,任何网站上的技术 ...
随机推荐
- IT服务生命周期
一.概述 IT服务生命周期由规划设计(Pianning&Design).部署实施(Implementing).服务运营(Opera,tion).持续改进(Improvemenit)和监督管理( ...
- Tableau如何绘制瀑布图
一.将子类别拖至列,利润拖拽至行,类型改为甘特条形图 二 右键利润-快速表计算-汇总(数据会从左向右显示累计汇总) 三.创建计算字段-[利润] 四.将负利润拖拽到大小,利润拖拽到颜色 分析-合计-显示 ...
- 一种基于Java Swing/HTML/MySQL的汽车租赁系统
该项目是一个Java的课程作业(大二),主要运用Java.Swing.HTML.MySQL,实现基本的租车逻辑.界面可视化.信息导出.数据存储等功能.实现管理员.用户两种角色登录,并结合Java开发中 ...
- Pytorch入门下 —— 其他
本节内容参照小土堆的pytorch入门视频教程. 现有模型使用和修改 pytorch框架提供了很多现有模型,其中torchvision.models包中有很多关于视觉(图像)领域的模型,如下图: 下面 ...
- DIgSILENT PowerFactory 15.1.7 破解过程
将dll文件复制到安装路径下:
- Element-UI 使用 class 方式和 css 方式引入图标
今天在使用 vxe-table 时,需要引入 Element UI的图标,顺便就找了下这些组件库中图标的引用方式. 我们知道 Element .Ant Design.Font Awesome 等很多组 ...
- vim 默认配置
vim ~/.vimrc 然后输入常用的需要用的命令,然后保存,这个每次启动VIM都会自动配置.当然你也可以在VIM里面按":"之后输入如下命令,但是下次启动之后设置就会丢失了. ...
- redis集群搭建,使用注意
https://www.cnblogs.com/vieta/p/11192137.html https://blog.csdn.net/qq_42815754/article/details/8291 ...
- Vue3 全家桶,从 0 到 1 实战项目,新手有福了
前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...
- C++基础之虚析构函数原理
结论 虚函数表指针 + 虚函数表 共同实现 演示 VS2017(32位) 基类有析虚构函数 一段代码演示 #include <iostream> #include <memory&g ...