图形验证插件,百度编辑器拓展功能,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,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做个插件,任何网站上的技术 ...
随机推荐
- 如何利用火焰图定位 Java 的 CPU 性能问题
常见 CPU 性能问题 你所负责的服务(下称:服务)是否遇到过以下现象: 休息的时候,手机突然收到大量告警短信,提示服务的 99.9 line 从 20ms 飙升至 10s: 正在敲代码实现业务功能 ...
- bcloud_bctf_2016(house of force)
例行检查我就不放了,该程序是32位的程序 将程序放入ida中 进行代码审计 首先这这里有一个off by null 可以通过这里泄露出来第一个chunk的地址信息 这里也有同样的问题,我看ha1vk师 ...
- bjdctf_2020_babyrop2
这道题是一道基本题,正因为它经典,所以需要重点记录一下. 这道题考察格式化字符串泄露canary,然后rop获得libc版本,之后拿到shell.拿到程序之后我们先检查一下保护... 开启了堆栈不可执 ...
- [BUUCTF]PWN——CmmC_Simplerop
cmcc_simplerop 附件 步骤 例行检查,32位,开启了nx保护 本地试运行一下程序,查看一下大概的情况 32位ida载入,习惯性的检索程序里的字符串,看了个寂寞,从main函数开始看程序 ...
- 阿里面试题: (a,b,c)组合索引, 查询语句select...from...where a=.. and c=..走索引吗?
面试官:(a,b,c)组合索引,查询语句select...from...where a=.. and c=..走索引吗应聘者: 最佳左前缀法,如果索引了多列,要遵守最左前缀法则,否则索引失效 按最左前 ...
- 资源相关视图(Project)
<Project2016 企业项目管理实践>张会斌 董方好 编著 这里就扯到资源了,资源是啥意思?如果是教科书,怕又是有一个名词解释要背吧,吼吼--其实这个资源在这里的意思基本上猜就能猜到 ...
- CF78B Easter Eggs 题解
Content 有一个有 \(n\) 个点的环,你可以将其染成一种颜色.一共有 \(7\) 种颜色(R,O,Y,G,B,I,V)可以选择.你的染色方案应该满足下面的要求: 每一个点都要被染色,且 \( ...
- ViewModel的创建
ViewModel的创建 ViewModel本身只是ViewModel这个类的子类: class MainViewModel: ViewModel() { } 在屏幕旋转UI重建的时候, 它是如何拥有 ...
- 通过一道简单的例题了解Linux内核PWN
写在前面 这篇文章目的在于简单介绍内核PWN题,揭开内核的神秘面纱.背后的知识点包含Linux驱动和内核源码,学习路线非常陡峭.也就是说,会一道Linux内核PWN需要非常多的铺垫知识,如果要学习可以 ...
- JAVA整合FlinkCDC 监控数据库表变化
版本至少jdk8 maven <!-- https://mvnrepository.com/artifact/com.alibaba.ververica/flink-connector-mysq ...