图形验证插件

网上找了很多图形验证插件,比较推荐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. pipeline option指令

    目录 一.简介 二.参数 buildDiscarder checkoutToSubdirectory disableConcurrentBuilds newContainerPerStage retr ...

  2. 【分布式技术专题】「OSS中间件系列」Minio的文件服务的存储模型及整合Java客户端访问的实战指南

    Minio的元数据 数据存储 MinIO对象存储系统没有元数据数据库,所有的操作都是对象级别的粒度的,这种做法的优势是: 个别对象的失效,不会溢出为更大级别的系统失效. 便于实现"强一致性& ...

  3. 甘特图中与任务有关的操作(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 任务建好了不是马上就没事了,后面还有各种事,比如像我这种粗心的,冷不丁就会冒出个"通假字"什么的,难道 ...

  4. 如何在 GitHub 上高效阅读源码?

    原文链接: 如何在 GitHub 上高效阅读源码? 之前听说过一个故事,一个领导为了提高团队战斗力,把团队成员集中起来,搞封闭开发,重点还是在没有网的条件下. 结果就是一个月过去了,产出基本为零. 我 ...

  5. CF935B Fafa and the Gates 题解

    Content 一个动点 \(F\) 一开始在平面直角坐标系上原点的位置,随后它会移动 \(n\) 次,每次只能向上走或者向右走 \(1\) 个单位,求经过直线 \(y=x\) 的次数. 数据范围:\ ...

  6. lvm 扩容

    总体思路: 逻辑卷要扩容,先扩容对应卷组, 扩容卷组的方式: 添加新的物理卷(磁盘已有分区,扩容后新建分区:或者新加了一块硬盘创建了新的物理卷),vgextend myvg /dev/vdb 扩容,/ ...

  7. Error: Not found: 'package:json_annotation/json_annotation.dart'

    问题原因 json_annotation版本不对 修改json_annotation版本号 当前可用版本号 json_annotation: ^2.2.0

  8. 页面调用百度地图但是使用了https证书之后不显示

    首先百度地图使用的都是http请求链接,但是安装了证书之后会觉得这个http不安全,所以默认请求失败 这时候我们在请求头添加 <meta http-equiv="Content-Sec ...

  9. 【LeetCode】144. Binary Tree Preorder Traversal 解题报告(Python&C++&Java)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 迭代 日期 题目地址:https://leetc ...

  10. LeetCode1238循环码排列

    题目 给你两个整数 n 和 start.你的任务是返回任意 (0,1,2,,...,2n-1) 的排列 p,并且满足: p[0] = start p[i] 和 p[i+1] 的二进制表示形式只有一位不 ...