- 博客(40)
- 收藏
- 关注
RSS订阅原创 检测链接是否是图片
但是后来发现有些图片的地址并没有后缀，上面的正则并不能判断链接是否是图片，可以通过。这种没啥好办法，通过名单判断把，如果图片带权限，做鉴权再请求。指示为图片类型（例如。
2023-10-30 14:37:22
760
原创 前端周总结
可以输入指令npx playwright test help，可以看到有一个npx playwright test --headed，执行，会弹窗浏览器现在操作步骤。vue-tsc --noEmit：vue 3 的一个类型检测工具，还包括对模板内表达式和组件之间 props 的验证，常用来生成单文件组件的 d.ts 文件。pinia不能在初始化之前调用，不然pinia实例化之后会有取不到值的问题，真的坑，也没有报错。方法（或者JSON.stringfy）深拷贝该对象再上传，这次能成功了，坑。
2023-04-27 11:24:16
357
2
原创 Vue3实现自定义vue-json-schema-form组件
其中uiSchema配置的下拉框的值可以在上面自定义组件通过props.options获取。默认组件无法提供，需要自定义组件来实现复杂交互。
2023-01-12 18:28:07
3320
2
原创 Vue项目兼容IE一些处理方法
前言这都2022年了，还要兼容ie，就离谱。。。项目使用的依赖的兼容性问题，由于IE在市场的占有率不到1%，很多插件已经不再考虑兼容IE浏览器了。还有一个是如何要兼容更低版本的浏览器（IE8-），那还得下载es3ify-webpack-plugin插件把es5转化成es3现在项目的css布局基本都是使用flex布局或者grid布局了，很多在ie上很出现布局错乱甚至不显示的问题。下面兼容的问题只针对功能性上的，css布局问题如果要兼容ie要多写好多代码，还影响后续开发的时间成本，所以我是不处理了。
2022-04-28 18:41:34
2463
原创 百度富文本编辑器UEditor自己做一些优化
图片相关控制台提示后台配置项返回格式出错，上传功能将不能正常使用！打开控制台就看到这个报错，上传功能需要提供正确的后端接口，具体可以看官方文档，如果上传的接口有多个，可以参考我的另一篇文章插入的图片尺寸过大如图可以看到这张图片占满了整个屏幕，需要出现了滚动条，想让图片自适应宽度。找到 ueditor/themes文件夹下有个iframe.css，默认只有一行注释，在里面加上自定义样式：/*可以在这里添加你自己的css*/img { max-width: 100%; /*图片自适
2021-11-27 17:34:01
1098
原创 前端一周小结
写switch语句的时候报Unexpected lexical declaration in case block错误比如写了下面这段代码，查了一下文档，发现中文文档中解释比较简单：该规则禁止词法声明 (let、const、function 和 class) 出现在 case或default 子句中。根据文档是要加上花括号去包裹，而且这里Eslint提示的是意外的词法声明，应该是和作用域有关，写了代码测试一下：控制台报错了，提示a变量已经被声明，说明虽然逻辑没走到case 1这里，但是ca
2021-11-26 20:51:21
446
原创 Window同时兼容运行多版本谷歌浏览器chrome
分享我做前端浏览器版本兼容测试遇到Chrome不能多版本共存，存在高版本覆盖低版本问题的解决方案，这个方法不影响Windows系统内已安装的Chrome下载你想要的chrome版本，我是在这里找寻下载版本的：https://www.chromedownloads.net/chrome64win/。下面就以80版本chrome为例子：下载完不要安装，修改后缀名exe为zip解压，如果你解压出来的文件夹里面是显示102~这种，不是chrome.7z的话，说明你下载的不是离线安装包，而是离线升级安装包，
2021-11-18 12:13:24
4121
1
原创 前端开发小结
正则相关匹配空标签/<([a-z0-9]+?)(\s+[a-zA-Z]+=".*")?><\/\1>/g上面的正则是匹配不到像<br/>这种自闭合标签（base、link、meta、input、image、br）的，要匹配自闭合标签需要下面的正则：/<(?:[^"'>]|"[^"]*"|'[^']*')*>/g或/<(?:[^"'>]|(["'])[^"']*\1)*>/g备注：()表示捕获分组，()会把每个分组里的匹配的
2021-11-15 21:22:14
850
原创 如何获取选中文字开头或者结尾的绝对定位
比如你选中了一段文字，需要在选中文字的前面或后面显示一个图标供用户操作，如下图你选中的文本可以通过window.getSelection去获取，但它可能是一个text节点，你需要通过获取它的parent节点，但如果你选中的只是这个parent节点的一段文字，定位会不准确。获取选中文字开头绝对定位这时候可以通过window.getSelection().getRange(0)其中的inserNode函数往选中文字的前面插入一个空的行内标签，然后通过getBoundingClientRect函数获取该节
2021-11-12 16:32:17
1339
1
原创 range.addRange()函数无效
新版本chrome（我的是95版本）已经删除了range对象的内置函数addRange，但执行此方法时，不会报错，打断点，执行到addRange时会提示The behavior that Selection.addRange() merges existing Range and the specified Range was removed解决：换成range对象里面的setEnd和setStart方法：const sel = window.getSelection()const range =
2021-11-12 16:30:04
1334
原创 UEditor百度富文本编辑器实现自定义按钮和自定义右键菜单
以1.5.0版本为例子：注意：所有字符串的字母只能小写，不能大写自定义工具栏按钮在根目录的ueditor.config.js找到toolbars参数（大于34行），在后面加上自定义字符串：然后在根目录/lang/zh-cn/zh-cn.js找到labelMap参数（差不多第9行）或者上图的第二个方框里面，加上字符串对之前按钮的悬浮文字提示：接着在根目录/theme/default/css/ueditor.css写下需要的样式，由于我没写样式，按钮就只有默认的样式：然后在ueditor.al
2021-11-08 15:54:48
1634
2
原创 UEditor百度富文本搭建时候遇到的问题
问题一：Uncaught SyntaxError: Unexpected token '<'点击去，发现是第一行报的错。看到这个报错就知道是引入js有问题了，这个文件是ueditor引入的，打开控制台，点击network，检查这个文件是否引入成功：果然，检查下路径，ueditor的根路径总共要检查两个地方，一个是ueditor.config.js开头的的url参数，还有一个是自己创建编辑器实例的时候是否有配置UEDITOR_HOME_URL参数，有的话也要检查路径是否正确。发现确实这
2021-11-08 14:48:51
2268
原创 UEditor富文本编辑器图片粘贴和上传问题
项目引入的是UEditor富文本编辑器，由于安全（把攻击脚本伪造成图片）和图片大小（base64格式的图片可能会太大）的原因，用户输入的图片都要先发送给后端，然后拿到后端的链接赋值给image标签的src属性。这里有两种处理办法：第一种：在ueditor.config.js里面的window.UEDITOR_CONFIG（配置项主体）加上imageUrl参数，大概32行处：重写ueditor.all.js 里面的getActionUrl方法，差不多在8776行但是由于这里的代码太多了，不容易维
2021-11-03 16:40:28
3535
9
原创 body有8px的神秘边距
首先，你需要知道为什么会有8px的神秘边距：很多元素默认有一个8px的 margin，而且在不同浏览器上表现效果不同在项目中，通常都是使用reser.css重置所有的样式表，可以保证在所有浏览器下，项目展示的样式是一致的：（1）在项目中应用：在asset的css中插入reset.css文件，// main.jsimport @/assets/css/reset.css（2）或者在demo这样写：<style>* { margin: 0; padding: 0;}&l
2021-11-02 14:11:30
2295
原创 鼠标事件mousemove拖动到iframe上监听失效问题
问题：监听鼠标拖动事件mousemove，当鼠标移动到页面嵌的iframe上时，事件无法被监听到，当鼠标移出iframe后，事件又能被监听到了。解决：可以创建一个层级高的div覆盖在整个项目上面，然后监听该div的鼠标移动事件。const mask = document.createElement('div')mask.style.cssText = 'position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 9999;
2021-10-28 18:08:46
6223
2
原创 Vue嵌入百度富文本编辑器UEditor
引入项目的是编译后的1.5.0版本的UEditor，我另一篇文章写的如何编译1.5.0版本的UEditor编译后，把dist文件里面文件放到项目的public/plugins/ueditor相关自定义配置看官方文档就行了，为了快速把项目搭建好，我就改了ueditor.config.js的根路径注意路径最前面也要加上/之后在component文件夹下创建一个UEditor.vue文件，在里面初始化UEditor。<template> <div id="ueditor">
2021-10-27 14:47:54
1096
原创 百度富文本编辑器ueditor编译得到ueditor.all.js、ueditor.all.min.js文件
我下载的是1.5.0版本的，就用这个进行演示吧。找到ueditor的github地址，下载压缩包并解压。得到源码，但是我们的目的是得到编译文件后放到项目态目录里面，所以需要进行编译获取ueditor.all.js、ueditor.all.min.js文件。打开解压文件根目录，打开控制台。先执行下载依赖npm install或者cnpm install，执行成功可以在根目录找到node_modules文件如果你没有安装grunt，需要先执行 npm install -g grunt-cli 命令
2021-10-27 11:09:36
2033
原创 阻止用户打开控制台
实现一、阻止打开首先得知道用户能通过什么方式打开控制台，一个是通过键盘事件，一个是鼠标右键。那就通过禁止键盘的f12事件：漏洞：浏览器设置其他快捷键打开控制台，没了。禁止右键事件：识别打开这时候问题来啦，有个聪明的小伙说那我先打开控制台，再进网站呢。好问题，那就得让程序判断你有没有打开控制台：通过浏览器宽高和可视宽高对比这种是通过获取浏览器的可视区域宽高（整个浏览器）window.innerWidth / window.innerHeight和浏览器中项目显示的宽高（包括书签栏）wi
2021-09-30 15:34:34
3219
原创 正则匹配html空标签
写功能的时候需要一个正则能匹配到空标签，并且需要白名单不去匹配某些特定的标签名。首先，看下要写正则需要用到的知识：表示内容的语法：((?!exp) 表示匹配后面不满足表达式的exp的位置[a-z] 表示所有单个字母[0-9] 同上\s 代表正则表达式中的一个空白字符表示次数的语法：? 表示0或1* 表示零次或连续多次。+ 表示至少一次先写个匹配所有标签的正则：后来发现死活匹配不上，一度怀疑自己正则写得有问题，后来发现是这个$符号的问题，服了，javascript在正则匹配只能用\n
2021-09-29 19:53:32
917
原创 文件流转换成二进制流
背景安全要求前端上传的图片都要先上传后端处理后才能显示。实现看了下，使用input框去上传的图片，都是二进制流，但是上网查了下如何实现，却是不太好找。自己写了个：
2021-09-15 11:47:34
1453
原创 设置contenteditable属性的div粘贴图片问题
需求：要一个能粘贴图片的文本框，并且图片要先上传至后端进行安全校验，拿到返回的图片地址进行输入。思路：普通的input框无法粘贴图片，联想到编辑器原理，可以使用div加html5新增的contenteditable属性来实现上述需求。然后监听粘贴事件，判断是否是图片...
2021-09-15 11:37:49
1978
原创 beforeRouterLeave 被触发两次
场景：beforeRouterLeave 函数里面有个确认框方法，离开页面前会弹出让用户确认是否离开当前页面，但是有时候点击确认后还会再次弹出确认框。看到网上说给确认框加上延时函数能解决问题，实践下确实能解决。但不知道是什么原因导致这个问题，于是检查操作流程，发现弹出两次确认框的情况下，确认框弹出前路由改变了（不应该改变啊），于是去看Vue 文档，检查相关代码发现在 beforeRouterLeave 函数里面使用 next() 方法来实现路由跳转，但项目使用 router.push() 来实现，全部换
2021-09-11 17:18:17
3698
7
原创 市面上主流编辑器介绍（2021/05/20）
Markdown编辑器更换调研背景Markdown是一种有用的轻量级标记语言。KMS项目使用的MD编辑器是editor.md，但多年前作者已经不再维护更新了。旧MD编辑器面临的问题渲染速度慢旧MD编辑器的渲染原理把全文进行正则匹配捕获特定文本去渲染功能，但功能一多时，每次都要去用正则去扫描全文，效率低下。且当文本很长时（差不多1万字），从点击文章到渲染出来需要5秒左右。功能限制当表格内容复杂一点时，用户难以对表格进行快速定位编辑，体验很差。（这是所有的分屏预览功能的MD编辑器的痛点）同步
2021-05-21 16:41:45
2254
原创 前端开发总结
本周总结Vue如何打断循环跳出for循环可以用continue或者return跳出本次循环，或者使用break跳出整个循环。跳出forEach1、forEach循环和普通循环是不一样的，本身无法跳出循环，必须遍历所有数据才能结束。2、只有一种办法能跳出循环：就是通过try…catch…去包裹这个循环，当要跳出整个循环时可以抛出错误来中断。eg：let a = [1, 2, 3]try { a.forEach(ele => { if (ele === 2) {
2020-12-19 16:23:30
530
1
原创 Vue项目嵌入编辑器的坑还有项目工程化的解决方案
上周项目用了许久的百度编辑器Ueditor应为太久不维护要更换编辑器了。预研后选择stackedit作为新的编辑器（虽然也好久没维护了），但耐不住功能比Ueditor多啊，后面还能进行二次开发。现在总结下自己遇到的坑：1、编辑器自己有开后端去运行，要把他改造成纯前端编辑器。怎么办呢，只能从头 git 代码下来修修改改了。找到后端运行代码，把里面逻辑修改成发送给后端或者改成 localstorage 本地存储。2、vue-cli版本太低。打开项目，发现vue-cli版本是2.6以下的，我的项目是2
2020-10-17 17:19:22
678
原创 一天一个小页面(4)
卡片展示效果今天复习了CSS的内容，就写点CSS的吧！1、效果图2、思路综合用css的知识、、、animation啊、弹性布局啊、ul的排列啊、文字的变换啊3、代码<div class="pricing-table"> <div class="col"> <div class="table"> ...
2019-07-20 23:51:11
501
原创 一天一个小页面(3)
掉方块今天时间比较紧，那就写个小小页面解压吧1、效果图2、思路创建多个宽、高都相等的小li，进行浮动排列，也可以用弹性布局，创建div包含所有span然后flex：row wrop；然后用css3新增的box-shadow效果会更好哦！javascript的话①如果你用li，那就可以用事件浮动去触发鼠标悬停在li上的事件②如果你用span，那就用document.querySele...
2019-07-20 00:21:28
889
原创 写写自己常用到的ES6(一)
模板字符串概念其实就是一种字符串的新的表现形式1、他解决了字符串和变量拼接的问题 var s3 = "a" + s1 + "b" + s2;或者也可以这样写：var s3 = ` a${s1} b ${s2} `;2、还有一个就是字符串换行，提升了代码的可读性不过这个更多的还是用在vue中， var s4 = ` <div> <p> ...
2019-07-20 00:03:25
2354
原创 关于JS继承的一些浅见
广义上的js继承：如果能通过某种方式，让某个对象访问到其他对象中的属性、方法，那么我们就把这种方式称之为继承一. 拷贝继承+我们来用代码实现一下拷贝继承//1、已经拥有一个对象var o4 = {};var o3 = {gendar:"男"，"grade:"初三"，group:"第五组",name:"张三"}//2、创建一个对象的拷贝（克隆）for,,in循环//a、去除对象中的...
2019-07-18 20:24:37
86
原创 一天一个小页面(2)
手风琴特效图片轮播1、效果图2、思路一个div嵌套创建一个ul>li*4实现字体垂直排列：——用一个div包裹他，宽得和图片最小化时的宽度一致；——再设置他的margin就行实现鼠标移动到图片滑动显示整个图片效果 ：——用js对li：hover伪类绑定一个animation动画实现第三步后会发现如果快速滑动鼠标在四个图片上时第四个图片会下移到下面——原因：anima...
2019-07-18 19:09:16
245
原创 一天一个小页面（1）
跳动的红心今天写跳动的红心1、思路首先要用css实现一个爱心的话，我是用一个正方形＋两个半圆画出来的。然后用CSS3动画的animation实现跳动效果。用CSS写的话效率高。2、界面今天写跳动的红心1、思路首先要用css实现一个爱心的话，我是用一个正方形＋两个半圆画出来的。然后用CSS3动画的animation实现跳动效果。用CSS写的话效率高。2、界面：...
2019-07-16 21:34:31
139
原创 关于注解的简析
关于注解的简析第一次写博客，瞎写首先，注解是什么？注解和注释有区别吗？注解就是给自己还有给处理器看的语句。而注释呢，只能让自己看到，而编译器会忽略掉这些注释内置注解有三种，1、@Override也就重写；主要来重写父类里面有的方法；比如使用很多的重写toString方法：@Overridepublic void toString(){ return "";}2、@Depr...
2019-04-10 19:57:17
107
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人