图形验证插件

网上找了很多图形验证插件,比较推荐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消息机制以及聊天室的更多相关文章

  1. Asp.NET MVC 使用 SignalR 实现推送功能二(Hubs 在线聊天室 获取保存用户信息)

    简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...

  2. Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

    简介       ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端 ...

  3. 原生NodeJs制作一个简易聊天室

    准备工作 安装NodeJs环境 安装编译器Sublime 如果网速不理想,可以百度一下如何加快npm的速度~ 使用node搭建一个简单的网站后台 做完准备工作之后,新建文件夹chatroom,在cha ...

  4. 基于 NodeJs 打造 Web 在线聊天室

    Socket.IO 简介与基础环境搭建 任务时间:10min ~ 20min 关于 Socket.IO Socket.IO 可以实现在浏览器和服务器之间实时双向通信,本节课程将详细介绍 Socket. ...

  5. Asp.NET websocket,Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室)

    ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端可以互相通知消息及 ...

  6. 百度编辑器(UEditor)自定义工具栏

    百度编辑器(UEditor)自定义工具栏的自定义 百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档! 百度编辑器默认配置展示界面 如何 ...

  7. ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(四) 添加表情、群聊功能

    休息了两天,还是决定把这个尾巴给收了.本篇是最后一篇,也算是草草收尾吧.今天要加上表情功能和群聊.基本上就差不多了,其他功能,读者可以自行扩展或者优化.至于我写的代码方面,自己也没去重构.好的,我们开 ...

  8. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  9. 一步步开发自己的博客 .NET版(4、文章发布功能)百度编辑器

    前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做个插件,任何网站上的技术 ...

随机推荐

  1. 如何利用火焰图定位 Java 的 CPU 性能问题

     常见 CPU 性能问题 你所负责的服务(下称:服务)是否遇到过以下现象: 休息的时候,手机突然收到大量告警短信,提示服务的 99.9 line 从 20ms 飙升至 10s: 正在敲代码实现业务功能 ...

  2. bcloud_bctf_2016(house of force)

    例行检查我就不放了,该程序是32位的程序 将程序放入ida中 进行代码审计 首先这这里有一个off by null 可以通过这里泄露出来第一个chunk的地址信息 这里也有同样的问题,我看ha1vk师 ...

  3. bjdctf_2020_babyrop2

    这道题是一道基本题,正因为它经典,所以需要重点记录一下. 这道题考察格式化字符串泄露canary,然后rop获得libc版本,之后拿到shell.拿到程序之后我们先检查一下保护... 开启了堆栈不可执 ...

  4. [BUUCTF]PWN——CmmC_Simplerop

    cmcc_simplerop 附件 步骤 例行检查,32位,开启了nx保护 本地试运行一下程序,查看一下大概的情况 32位ida载入,习惯性的检索程序里的字符串,看了个寂寞,从main函数开始看程序 ...

  5. 阿里面试题: (a,b,c)组合索引, 查询语句select...from...where a=.. and c=..走索引吗?

    面试官:(a,b,c)组合索引,查询语句select...from...where a=.. and c=..走索引吗应聘者: 最佳左前缀法,如果索引了多列,要遵守最左前缀法则,否则索引失效 按最左前 ...

  6. 资源相关视图(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 这里就扯到资源了,资源是啥意思?如果是教科书,怕又是有一个名词解释要背吧,吼吼--其实这个资源在这里的意思基本上猜就能猜到 ...

  7. CF78B Easter Eggs 题解

    Content 有一个有 \(n\) 个点的环,你可以将其染成一种颜色.一共有 \(7\) 种颜色(R,O,Y,G,B,I,V)可以选择.你的染色方案应该满足下面的要求: 每一个点都要被染色,且 \( ...

  8. ViewModel的创建

    ViewModel的创建 ViewModel本身只是ViewModel这个类的子类: class MainViewModel: ViewModel() { } 在屏幕旋转UI重建的时候, 它是如何拥有 ...

  9. 通过一道简单的例题了解Linux内核PWN

    写在前面 这篇文章目的在于简单介绍内核PWN题,揭开内核的神秘面纱.背后的知识点包含Linux驱动和内核源码,学习路线非常陡峭.也就是说,会一道Linux内核PWN需要非常多的铺垫知识,如果要学习可以 ...

  10. JAVA整合FlinkCDC 监控数据库表变化

    版本至少jdk8 maven <!-- https://mvnrepository.com/artifact/com.alibaba.ververica/flink-connector-mysq ...