分类目录归档:JavaScript

Ckeditor5 图片媒体库浏览插件

找了一圈,网上的各种资源都是针对图片上传的,没有针对已有的图片进行浏览添加。顾参考插件教程写了一个支持图片浏览的插件。

首先是说明,这个只提供了接口,具体的图片窗口展示样式需要自己做。

源码参考地址: https://gitee.com/yanlong-li/ckeditor5-build-classic/tree/stable/src/plugins/ImageBrowsing

提供两个api:

open 负责点击菜单时,回调自定义函数来开启图片浏览窗口

init 负责在插件初始化时,给一个匿名函数,用于图片浏览后给定一个图片地址进行插入

下面是 插件,放置在 /src/plugins 目录下的,可自定义,imageIcon 也是自定义一个图标
import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import imageIcon from './icon.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
// 导出插件   ImageBrowsing  可自定义
export default class ImageBrowsing extends Plugin {
   init() {
     //插件的名字  imageBrowsing  可自定义
      const config = this.editor.config.get('imageBrowsing');

      const editor = this.editor;

      // 调用 init 函数 将 匿名函数传递进去  方便在外围调用
      config.init((imageUrl) => {
         if (!imageUrl) {
            return;
         }
         editor.model.change(writer => {
            const imageElement = writer.createElement('image', {
               src: imageUrl
            });

            // Insert the image in the current selection location.
            editor.model.insertContent(imageElement, editor.model.document.selection);
         });
      })

      editor.ui.componentFactory.add('ImageBrowsing', locale => {
         const view = new ButtonView(locale);

         view.set({
            label: '媒体库',
            icon: imageIcon,
            tooltip: true
         });

         // Callback executed once the image is clicked.
         view.on('execute', () => {
            if (!config.open) {
               return;
            }
            config.open()
         });

         return view;
      });

   }
}
引用时的配置:
imageBrowsing: {
   call: null,
   init: (call) => {
      // 接收一个匿名形参,并保存起来,存在哪里都行;
      this.call = call
      // 当选择图片时调用
      //  call("图片url地址") 
   },
   open: () => {
      console.log('哈哈哈');
   }
},

[转载]如何在Windows中调试iOS中的Safari网页

需求背景

在做一个项目时,发现某些图片在安卓设备和电脑上能正常显示,但是在iOS上却无法显示。网上没有找到解决方案。因为没有苹果电脑,所以需要在Windows中对苹果系统进行网页调试。

系统环境

电脑操作系统:Windows 10 专业版 64位 (10.0,版本 1803-17134.228)

iPhone 7操作系统:iOS 12. beta8

安装前准备

  1. 要保证iPhone/iPad能使用USB与电脑正常连接
  2. 在iOS中打开调试模式:设置->Safari->高级->Web 检查器

安装

1. 安装scoop

注意以下命令实在PowerShell中执行  cmd不支持
# 如果安装失败,请执行以下命令再重新安装
Set-ExecutionPolicy RemoteSigned -scope CurrentUser
并输入  A  回车
# 使用Powershell进行安装
iex (new-object net.webclient).downloadstring('https://get.scoop.sh')


你可能遇到些问题,如无法访问https://get.scoop.shz这个链接  和步骤2 安装ios-webkit-debug-proxy
需要挂翻墙代理  如果用ssr 需要关闭全局 关闭负载均衡

2. 安装ios-webkit-debug-proxy

# 在Powershell中执行
scoop bucket add extras
scoop install ios-webkit-debug-proxy

使用

1. 启动ios-webkit-debug-proxy

# 在Powershell中执行,-f表示指定前端工具,这里使用chrome-devtools进行调试
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

执行成功后,Powershell窗口会显示

Listing devices on :9221

2. 打开网页

在chrome浏览器中输入localhost:9221,

会列出设备列表,如果没有就刷新看看,确保你已链接了IOS设备,并信任电脑

点击选定的设备

如果进入网页后出现Inspectable pages for 你设备的名称字样,表示连接成功,然后在iPhone/iPad中使用Safari打开网页,再刷新电脑上的chrome,就会出现一个超链接(chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1),然后右键复制链接地址并在新标签中打开,就可以像在电脑中一样对网页进行调试了。

补充

如果没有连接成功,或碰到其它什么问题,可以查看ios-webkit-debug-proxy的官方文档,里面有更详细的说明。

问题解决

最后通过调试发现是图片本身的原因,重新上传图片就能在iOS中正常显示了。

作者:总有大王想巡山
链接:https://www.jianshu.com/p/73715ee54712
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

博主根据实际情况略有修改

新的弹窗样式文件https://sweetalert.js.org/docs/

很多时候需要给用户一个提示,一个一个写费事又费力除非自己封装一个js库每次调用,然又懒得写。这时候我们就用一些第三方开源库了。

本期推荐https://sweetalert.js.org/docs/

这是一个简单而又稍微美观点点点。。自己决定吧

入门很简单,引入js文件

然后直接swal(‘博主真帅’);

…………………………………………

以下省略N万字

关于即将准备的密码储存功能问题汇总

互联网发展迅速,各种产品也是五花八门,各种社区、论坛(貌似意思差不多)、还有全球最大的“同性交友”社区GITHUB(嗯哼)???常用的还好说,但是很多小网站比如某些技术论坛,也就当时查资料可能需要用到注册了账号,过了很久很久以后(三年后···)扯远了,反正就是越来越多,密码呢也为了某个APP被各种泄露防止被通杀,这就考验记忆力了,时间久了密码都串了,深受其害啊~~~~~

所以下一个上线的小产品就是密码管理器了。名字还没想好,到时候再说,因逻辑简单过程虽然复杂,所以不考虑使用PHP框架,当然后续开发完善后会涵盖Windows、Web、Android、IOS等平台。

下面是基本框架:

用户基础账户:签名加密如MD5、SHA1、SHA256、SHA512当然不会这么简单啦。多复杂也没意义,被黑了都是浮云。

账户管理:

账户、密码都将采用RSA加密传输到服务器(这里用到的RSA密钥对是公共的根据周期进行更新),服务器解密后会使用另一套RSA进行二次加密(每个用户都是单独的RSA密钥对、如无特殊情况不进行更替)。

下面就是大致的流程图,目前还在你考虑细节,可能会有改动。如在如何安全储存用户信息方面。

HTML表单之JS-RSA加密PHP解密教程

 

随着互联网的日益发展,互联网安全成了重中之重。现在各大互联网公司开始废弃HTTP协议转向全站HTTPS加密传输。没有一种加密方式是绝对的安全,只是解密所获得的效益是否成正比。

 

我们最常见的登陆包含了用户个人的账户及密码,而密码在HTTP传输中是明文传输,这使得非法分子有机可乘,尤其是在连接公共WIFI时。

 

好吧我编不下去了,下面直接进入正题吧!!

不了解RSA加密的请  点击这里 查看百度的介绍。

本文源程序来自  OHDAVE.COM  可自行查阅

index.php:

<?php
$privateKey = file_get_contents(__DIR__.'/private_key.pem');
$private_key = openssl_pkey_get_private($privateKey);
$ciphertext = $_POST['string'];
if(!empty($ciphertext)){
$bin_ciphertext = base64_decode($ciphertext);
openssl_private_decrypt($bin_ciphertext, $plaintext, $private_key, OPENSSL_PKCS1_PADDING);
echo "密文:<br/>".$ciphertext;
echo "解密:<br/>".$plaintext;
}
?>
<html>
<head>
<script src="BigInt.js" ></script>
<script src="Barrett.js" ></script>
<script src="RSA.js"></script>
<script language="JavaScript">
var key;
function bodyLoad()
{
setMaxDigits(262);
key = new RSAKeyPair(
//这里是16进制数据
"10001",
"10001",
//rsa public key
"EDA017EBA532CD23754813203F4026C78EB9089FB7DA16ABBC5220C87BEC3B3C9684E8181AE8AE56CBAEE40BA5B2778A9BA4B59FF6C4FFFEB086E4BC288CC00E970C4CE0BEFAD7ED23FFD6D86F5B2B400ED11F20CCFF67D9DF6DA8620EE5CA20741265A5AF51AE2EF0B1D3834F3E90D5545D12CA67B629332F349020C9A5789B01BA147870108FC436CEEB401DD0BEADA4E2F0DB6AB6D506E7D0AD1C947FCEF38346E82F6D6048D2683494DE8E515243FD1C750C6E6195436BB6FA1F0E4BF86471AB30B34C2FCEEB1DAE8937C0B8DB265AC1067FF6EC46402AA2853B8D69C157C3B08F165C1976E799801F29FBD18516AAAC3B94901284202DF1E941EB9FB86F",
//
2048
);
}
function encryptString()
{
//加密
var ciphertext = encryptedString(key, document.subForm.string.value,
RSAAPP.PKCS1Padding, RSAAPP.RawEncoding);
//将转换后的HEX转换成ASIIC
document.subForm.string.value = window.btoa(ciphertext);
//控制台打印日志,调试使用
console.log(document.subForm.string.value);
//提交表单
document.subForm.submit();

}

</script>
</head>
<body onload="bodyLoad()">
<div>这是一个RAS加密解密测试代码</div>
<form action="index.php" name="subForm" method="post">
<label>请输入字符串<input type="text" name="string" value="123456"/></label>
<input type="button" value="提交" onclick="encryptString()"/>
</form>
</body>
</html>

js:
http://www.ohdave.com/rsa/BigInt.js
http://www.ohdave.com/rsa/Barrett.js
http://www.ohdave.com/rsa/RSA.js

以上例子就是基本的RSA加密了,具体的实现方法可自行研究。
PS:ASSIC大于127的字符,可通过其他方式转转移后加密解密。如转换成URL编码、UTF-8
源码点击这里这里这里->rsa<-

基于SOCKET.IO的即时通讯聊天系统

SOCKET通讯系统

本项目是基于socket.io的WEB网站内嵌即时通讯系统,单独编写用于学习交流使用,请勿用于非法行为,提供一个公共房间,可多人独立私聊

环境NODEJS、socket.io、Bootstarp

第一步配置环境 你需要下载NODEJS并安装 下面贴出NODEJS的官网

https://nodejs.org/en/

第二步确认环境 确认你下载的NODEJS安装后能正常使用 打开CMD窗口 输入NODE –version 将会输出版本号

如:V7.7.4

第三部 将下载或克隆的代码解压 进入socketServer文件夹 执行一次 one.bat 进行依赖库安装

第四部 执行start.bat即可到

开放端口:3000

如看到其他信息或报错等行为,请自行查看原因

第五步 进入socketClient文件夹 用浏览器打开index.html 即可畅聊

GitHub https://github.com/Yanlong-LI/socketChat

阿里云 https://code.aliyun.com/895185921/ssocketchat.git