图形验证插件

网上找了很多图形验证插件,比较推荐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. IT服务生命周期

    一.概述 IT服务生命周期由规划设计(Pianning&Design).部署实施(Implementing).服务运营(Opera,tion).持续改进(Improvemenit)和监督管理( ...

  2. Tableau如何绘制瀑布图

    一.将子类别拖至列,利润拖拽至行,类型改为甘特条形图 二 右键利润-快速表计算-汇总(数据会从左向右显示累计汇总) 三.创建计算字段-[利润] 四.将负利润拖拽到大小,利润拖拽到颜色 分析-合计-显示 ...

  3. 一种基于Java Swing/HTML/MySQL的汽车租赁系统

    该项目是一个Java的课程作业(大二),主要运用Java.Swing.HTML.MySQL,实现基本的租车逻辑.界面可视化.信息导出.数据存储等功能.实现管理员.用户两种角色登录,并结合Java开发中 ...

  4. Pytorch入门下 —— 其他

    本节内容参照小土堆的pytorch入门视频教程. 现有模型使用和修改 pytorch框架提供了很多现有模型,其中torchvision.models包中有很多关于视觉(图像)领域的模型,如下图: 下面 ...

  5. DIgSILENT PowerFactory 15.1.7 破解过程

    将dll文件复制到安装路径下:

  6. Element-UI 使用 class 方式和 css 方式引入图标

    今天在使用 vxe-table 时,需要引入 Element UI的图标,顺便就找了下这些组件库中图标的引用方式. 我们知道 Element .Ant Design.Font Awesome 等很多组 ...

  7. vim 默认配置

    vim ~/.vimrc 然后输入常用的需要用的命令,然后保存,这个每次启动VIM都会自动配置.当然你也可以在VIM里面按":"之后输入如下命令,但是下次启动之后设置就会丢失了. ...

  8. redis集群搭建,使用注意

    https://www.cnblogs.com/vieta/p/11192137.html https://blog.csdn.net/qq_42815754/article/details/8291 ...

  9. Vue3 全家桶,从 0 到 1 实战项目,新手有福了

    前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...

  10. C++基础之虚析构函数原理

    结论 虚函数表指针 + 虚函数表 共同实现 演示 VS2017(32位) 基类有析虚构函数 一段代码演示 #include <iostream> #include <memory&g ...