Jioho的博客

本文介绍了Plasmo这个工具，可以用来适应各种的技术框架，让你快速上手插件开发。同时也说了一下chrome插件升级到V3需要注意的内容和分享了一些快速入门的优秀文章和文档

如果你正在学习 TS，可是像我一样仅仅停留在定义类型，定义 / 的层面的话， 这份体操类型练习题一定不要错过 ！让我们一起学习TS类型体操的各种姿势

使用 svg 代替 canvas 做水印其实也是为了方便快捷，减少了 canvas 的渲染导出图片的操作，很好的利用了 svg 可以作为背景图的特性

本文的代码和实现思路参考公众号 - iCSS 前端趣闻：CSS 实现可拉伸调整尺寸的分栏布局下文为记录和整理学习的过程中自身的思考。如有侵权请联系我删除纯 css 实现多栏拖动大小查看效果演示实现原理核心是使用 css 的 resize 属性。当节点拖动的时候，resize 属性会自动帮我们修改 dom 节点的行内样式（width/height）。免去了我们自己用 js 实现拖动配合 flex 布局，实现一个容器设置宽/高，剩余的容器占 flex:1 实现自适应的布局/* 横向拖动的时候.

学习 mammoth 源码，并且通过修改mammoth支持导入word文档部分样式内容

node-json-db 是一个非常贴近前端API的本地JSON类型数据库，node-json-db的出现让一些 node 小工具有更好的拓展性

简单的分析了一下 koa 源码，进一步分析了 koa-compose。了解了中间件实现机制，自己动手实现了一个中间件管理，然自己的程序也用上洋葱模型

了解洋葱模型执行顺序分析部分 koa 中间件的源码来加深对中间件的认识

正则表达式匹配失效，正则循环匹配失效，正则lastIndex介绍

本文做一个抛砖引玉，介绍了最基础的注册按钮、下拉菜单、注册 icon 和内置弹窗的使用。后面还会有几个实战的小 demo，都会重新用到这一块的内容~敬请期待

介绍了tinymce插件开发或者业务开发中经常会用到的API和API使用的演示。主要介绍了tinymce事件监听，获取 dom 节点，光标操作，内部指令等。

tinymce 插件开发环境搭建，插件目录规范，tinymce插件引入逻辑

文章目录tinymce 环境搭建初始化目录结构使用 Rollup 运行，打包Rollup 打包效果新建 2 个插件，编写 rollup.config.jsrollup 配置 ES6 转 ES5rollup 配置 代码压缩添加 serve 和 热更新rollup 支持 less打包配置动态入口根据目录打包引入静态资源 和 清理旧资源最后先介绍一下这个系类（tinymce），该系列以后相关的代码都会更新在 tinymce-pluginstinymce 是一个富文本插件。官网已经介绍的很清楚了这个系列主要的

先上效果图真机PC Edgewindow 使用 Edge/Chrome 调试手机 iOS 的 Safari 浏览器Safari 是 苹果配套的浏览器，正常来说如果使用的是 macOS 直接一条数据线就可以连接调试了but 今天的主题是 window 系统调试 iOS 手机浏览器如果要调试的界面没有 https 的话，直接用 spy-debugger 或者 whistle 也是很方便的。然而如果要调试 https 界面，证书都能搞掉半条命安装需要的依赖包重点：下面的操作都需要在 W

title: 富文本编辑器复制word文档中的图片date: 2020-06-24sidebar: autocategories:前端tags:富文本编辑器word文档文章有点长，感觉每次写文章都特别啰嗦，如果不想看过程的话直接跳到总结，那边有核心的方法~富文本编辑器复制 word 文档中的图片问题点：从 word 文档复制进来的内容的图片都是 file:/// 协议，这时候如果我们的页面是 http://或者 https:// 协议的话，就不允许读取图片了。除非页面也是.

血淋淋的教训只为呈现更好的文章内容package-lock 介绍nodejs 对 package-lock 的介绍：package-lock.json 文件最重要的一句就是：该文件旨在跟踪被安装的每个软件包的确切版本，以便产品可以以相同的方式被 100％ 复制（即使软件包的维护者更新了软件包）。问题的出现今天新开了一个项目，就把一个项目的脚手架复制到另外一个项目去。然后突然出现了各种各样的问题。最离谱就是同样的代码，另外一个域名运行的好好的，就新项目各种问题。。。没报错，本地运行没警告~

文章目录js 实现代码格式化调用 api实现代码高亮引入用法highlight.js 高亮代码不换行innerText 和 innerHTML 有什么区别解决 innerHTML 渲染为真实节点的问题上色后都是 span 标签，是怎么做到换行的？vue 中使用 highlight.js用指令使用 js_beautify关于文章开头的编辑器实现一个简易版的网页编辑器，没有智能提示，也不会自动高亮标签（需要手动高亮）用的是 vue+ Highlight.js + js-beautify效果如下图js

tinymce 实现 粘贴图片自动上传tinymce 中文文档：上传图片和文件关于图片上传的踩坑记录，基本就是如下几个文章目录tinymce 实现 粘贴图片自动上传不能复制本地图片然后粘贴粘贴进来的图片上传问题上传图片后回显图片点开大图后复制进来 2 张的问题不能复制本地图片然后粘贴图片的复制粘贴，依赖于 paste 插件 文档:插件 \ paste 粘贴插件简单的配置如下：tinymce.init({ selector: '#tinydemo', plugins: 'paste',

Promise 控制并发请求数量前言：浏览器对对同一个服务器的并发数是有限制的，参考如下表格（表格来源于网络，未进过严谨测试）：浏览器HTTP / 1.1HTTP / 1.0IE 1166IE 1066IE 91010IE 866IE 6,724火狐66Safari 3,444Chrome 4+66歌剧 9.63,10.00alpha44Opera 10.51+8？iPh

前言作为程序猿，linux 是始终绕不开的东西，其实服务器买好很久了，就一直没搞起来，这次就记录一下我的第一个服务器服务器也是从 0 开始搭建的，然后一开始给朋友练手安装软件了（没用宝塔，全手动安装）后面也都会提到安装的过程安装软件前端需要运行项目其实要的东西不多，nginx、nodejs、git。就够玩的了git 安装git 安装其实特别简单，因为用的是centos 的服务器，所以直接 yum install git 就完事了，没太多花里胡哨的东西nginx 安装可以看下以前的博客链接，个

video-js 库使用 自定义组件video-js 库原始版的库：github/videojsvue 封装过的组件：npm/vue-video-player这是一个非常棒的播放器，还兼容 hls 的直播流（m3u8）格式的等，还支持自定义组件，基本上满足播放器的很多功能了。如果想了解直播的可以看下以前的文章 vue 项目进行直播视频 vue-video-player后面更多会说自定义组件说一说我的遇到的坑：本来用播放器播放直播流 OK 了，可是 UI 和我说，播放器在回放的时候，希望像普

前端又双叒叕来新玩具了ficusjs 系列ficusjs老规矩还是先介绍一下 ficusjs。 文档地址：docs-ficusjs说 ficusjs 之前，就不得不提 Web ComponentsWeb Components 旨在解决这些问题 — 它由三项主要技术组成，它们可以一起使用来创建封装功能的定制元素，可以在你喜欢的任何地方重用，不必担心代码冲突。在我理解，这是下一代的 web 前端技术，让前端的组件化更进一步！目前做前端组件化都是基于框架(比如 vue，react 之类的)，而 w

js 加载并显示 excel 文件养成先放效果在开讲的好习惯~项目演示和代码地址：codesandbox/js-xlsx-demo完全通过 JS 的能力加载了一份 excel 表格，虽然每个单元格的宽度高度不能 100%还原（也许是我没看完具体的文档）。不过前端可以通过样式，给每一个格子在另外定样式今天主角 sheetjs官网的 demo官网的 demo 并没有合并单元格，不过他可以像 excel 一样选中多个单元格，感兴趣的可以去研究一下兼容性：IE8 （那就是全世界浏览器都支持了）引

文章目录window 平台编译 draco 库环境准备cmakeVisual Studio开始编译获取最新的代码CMake 使用友情链接：window 平台编译 draco 库前面一篇文章讲了一下 three.js 的使用 VR 效果 前端使用 three.js 加载 Obj（三维模型文件）也附上了 linux 编译 draco 的过程。也提供了 window 平台下的 .exe 文件不过最近遇到一个问题就是，编译后的代码是旧的，draco 也一直在更新迭代。所以今天就补上 window 平台编译

node 爬虫 puppeteer 使用puppeteer 是一个基于 Chromium 的 node 爬虫框架。其厉害之处就是他具备浏览器的所有功能，并且通过 nodejs 就可以控制。完美实现我们要的爬虫效果 (后面附有完整代码~)安装 puppeteer 时还会同步下载 Chromium 。网络不好的直接用 cnpm 下载即可。当然官方也有一个另外的包，原话如下：Since version 1.7.0 we publish the puppeteer-core package, a versi

调试 node 程序本文或许有点长，因为调试 node 真是折磨了很久，最后的当然也是找到了称心如意的工具，看下图！！何为称心如意？热更新console 查看输出的对象（命令行看 js 输出的对象真是噩梦）方便调试，包括且不局限于：断点，运行单个文件，等…上面的图看起来像是 chrome 控制台，但绝对不仅仅只是 --inspect-brk 打开的那个感兴趣的可以看下下面一个个工具的对比，如果想直接达到上图的效果直接找到 ndb 的目录去把~热更新代表 nodemon::: tip

Vue项目引入使用svg随着项目页面的增多，UI 库的 svg 图标渐渐不够用了。于是 UI 给了一大堆的 svg 新的图标，一个个引入显然不实际，于是把 svg 放到指定文件夹，然后批量引入，通过组件去使用这一堆 svg。项目结构|--build| `-- webpack.base.js`--src `-- assets `-- icons |-- index.js `-- svg `--

文章目录普通图片连接转化为文件实现1、图片链接转base641. 利用`canvas`转换2. 利用ajax转换3. 利用fetch转换2、base64转化为文件类型普通图片连接转化为文件实现这边用一张 gif 图来实现1、图片链接转base641. 利用canvas转换限制：只能转化为普通的jpg/png图片。无法转化gif图const imgToBase64 = (url,c...

调试 PC 端的内置浏览器界面很多网页都有用到微信授权，这意味着很多页面都必须在微信内置的浏览器才能打开。可是这时候想看下网页的代码，调试下，就没法子了。今天就来解决这个问题：因为微信用的也是 Chromium 内核，只是禁了右键和 F12。把控制台阉割了，我们要做的就是把控制台加回来！查看浏览器内核位置<html> <script type="text/javascript"> window.open('chrome://version') </scr

使用 webpack 搭建 vue 开发环境（四）对应分支 Jioho/webpack_config@v0.0.4公共模块一起打包在开始之前，直接运行一下打包，看下优化前的效果：可以看到打包了 3 个 html 页面，对应着 3 份 JS看下 dist 目录下的 JS 的内容（goods 模块和 user_setting 模块）：代码看着是一样的，因为页面的 JS 都是一样的，差别不大，不过下面的 vue.js 又重复引入了一次，就是有多少个模块，vue 就得引入多少次像这种公共资源，其实可

chrome 大法好chrome Performance 应该都不陌生，但是不陌生代表会用~今天就来记录一下 chrome Performance 的冰山一角开始既然是性能调试，那就不要掺杂其他的因素影响。很多教程第一步就是打开隐身模式。但是插件咋办？我就是个十足的插件迷总不能都卸载了把，手动隐藏？那也太累了把，就没别的办法了吗？准备干净的 chrome找到 chrome 的快捷方式，90% 都是在这里了，C:\Program Files (x86)\Google\Chrome\Appli

不用 react 脚手架和 webpack，直接使用 react 写 demo老项目使用 react技术一直发展，可是总有项目来不及更新。当年 MVC 技术热度不减现在的 react 和 vue。几年过去了，前后端分离，各种前端框架的出现，使得部分老项目更加少人维护了，毕竟 MVC 项目的语法对前端实在是太不友好了然而最近有一个项目就是 java web 的项目，可是新的需求的 UI 库又是基于 teambition 的，借此机会也顺便学习下 react。react 可以像 vue 一样 “渐进式

what?chrome 会报错？你代码写错了把！chrome 报错 navigator.mediaDevices is undefined最近在开发一个摄像头项目（多人会议，需要摄像头~~）。然后同事的电脑调试好好的，到我这里就报错了，我的 chrome 版本一直都在最新的，为啥到我这反而还不兼容？原来是以后的内容会越来越严格chrome：想调用摄像头？可以啊，拿出你的https证书给我瞧瞧解决问题毕竟不可能到处都有 https 证书把，总得本地调试把，localhost 域名总会有吧。于是发

edge 真香啊从路转粉到转正的 edge虽然目前主力浏览器还是 chrome。毕竟 edge 上插件还没那么多，很多从 chrome 同步过去的插件都是用不了/报错了。但是这并不影响 edge 的进步！尤其是国内的网络，edge 能满足大部分的需求。加上 edge 控制台的字体，配色，深得我心~。等 edge 插件市场成长起来后，一定把 edge 当主力！回到正题，调试 H5每次说到调试 H5，好像有很多工具，又好像很多都拿不出手。比如:fiddler 普通的抓包工具了spy-deb

title: 使用 webpack 搭建 vue 开发环境（三）date: 2020-10-27sidebar: autocategories:前端tags:webpack刚好断更一个月~~。不过我还是回来了！老规矩，代码放在 码云@Jioho/webpack_config v0.0.3 分支，搞定后合并到 master根据上次留下的锅，看下这次需要解决什么问题当前项目的热更新是属于哪种热更新？实现一个简单的多入口本来还有 实现自动获取入口（重头戏）和 添加代码运行后的.

使用 webpack 搭建 vue 开发环境（二）接着上一回，第二篇文章开始更进一步的配置老规矩，基于 v0.0.1 的代码继续开发，这次配置结束后的代码将会划分为 v0.0.2使用 less 完善开发体验安装使用 css 预处理器-lessnpm install --save-dev less less-loader修改配置，因为 test 是可以接收正则表达式的，那么对于 css和less的匹配，我们可以这样写：test: /\.(less|css)$/,webpack.base.js

webpack/vue-cli 中的 publicPath / 和 ./ 的区别在说这个问题之前，vue-cli 的配置文档已经说的非常清楚了 publicPath而 webpack 对于 publicPath 的描述相对苍白。但是 vue-cli 对于我们来说也是一个黑盒子，我们只知道 publicPath 可以配置'',./ 或者 /my-app/ 这种自定义 URL。但是，你真的理解 webpack 里面的 publicPath 吗？准备环境nginx 模拟一个真实的 URL 和高仿真项目

只要一直在路上，一切都不算远使用 webpack 搭建 vue 开发环境（一）虽然 vue-cli 已经非常成熟，成熟到可能自己写的 webpack 性能上不一定比得上 vue-cli。当然只是性能上，在实用性，拓展性，学习性上，自己能写出符合自己工程项目的 webpack 配置才是最好的所有的代码都已经放在了 码云@Jioho/webpack_config毕竟 github 有点慢~这边的网络上不去master 分支的代码是每个版本迭代后最新的代码，所以第一篇文章的最终代码在 v0.0.1 分

IE 是前端一生的夙敌文章目录问题引出冷静分析撸码解决html 结构css 样式重头戏 JS完整的 demo总结问题引出没人不认识这个把：<input name="username" placeholder="请输入用户名" />就一个输入框，然后没输入值情况下显示 请输入用户名偏偏 IE10 以下就不认识 placeholder 兼容性我真是，惊呆了。。。冷静分析采用 <label></label> 标签为何？我们需要把文字，用定位的方式定在

1. 外部 css 文件已经存在1.1. 动态引入 css 文件在 head 标签内在创建一个 link 标签来引入 css。这个前提是外部的 css 已经存在function loadStyle(url) { var link = document.createElement('link') link.type = 'text/css' link.rel = 'stylesheet' link.href = url var head = document.getElementsB