这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 书接前文: 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器 2. 富文本编辑器(MVP) 2.11 鼠标事件 这篇文章, 我们来实现迄今为止我们需要的鼠标事件…

<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 2. 富文本编辑器(MVP) 2.13 z-index 2.13.1 新的问题 上一篇博客中, 我们实现了mouse…

书接前文: 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 2.5 观察一下幻灯片中的文本框 我们发现: 一个文本框中有若干行文字 一行文字中每个字符的大小,…

这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 从零开始, 开发一个 Web Office 套件 (1): 富文本编辑器 从零开始, 开发一个 Web Office 套件 (2): 富文本编辑器 从零开始, 开发一个 Web Off…

这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 富文本编辑器 万里长征的第一步: 我们先开发一个基于canvas的富文本编辑器. 之后, 这个编辑器可以用在我们所有类型的文档中(文档, 表格, 幻灯片...). 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 1. Environ…

<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客, 最终目的是要做一个基于HTML Canvas 的, 类似于微软 Office 的 Web Office 套件, 包括: 文档, 表格, 幻灯片... 等等. 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 2. 富文本编辑器(MVP) 2.15 Mouse hover over text 2.15.1 再议 Boundi…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 上一节我们初步完成了拖动选中文字的feature,不过还遗留了一些 edge case.这篇文章我们来处理它们.…

<从零开始, 开发一个 Web Office 套件>系列博客目录 这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 对应的Github repo 地址: https://github.com/zhaokang555/canvas-text-editor 2. 富文本编辑器(MVP) 2.16 光标 我们先来实现一个闪烁的光标,就像下面这样: 2.16.1 绘制静止的光标 首先,创…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 2. 富文本编辑器(MVP) 2.18 Click 事件的 z-index 2.18.1 新的问题:点击空白处 首…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…

这是一个系列博客,最终目的是要做一个基于 HTML Canvas 的.类似于微软 Office 的 Web Office 套件(包括:文档.表格.幻灯片--等等). 博客园:<从零开始, 开发一个 Web Office 套件>系列博客目录 富文本编辑器 Github repo 地址:https://github.com/zhaokang555/canvas-text-editor 富文本编辑器 在线 Demo:https://zhaokang555.github.io/canvas-text-…

Python之路,Day18 - 开发一个WEB聊天来撩妹吧   本节内容: 项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以删除.添加.禁言群友 可以与聊天室里的人进行临时会话(与qq群一样) 可以在群中发图片 可以与好友一对一发文件 知识必备: django html\css\js bootstrap jquery, ajax 前景介绍 首先我们知道ht…

项目实战:开发一个WEB聊天室 功能需求: 用户可以与好友一对一聊天 可以搜索.添加某人为好友 用户可以搜索和添加群 每个群有管理员可以审批用户的加群请求,群管理员可以用多个,群管理员可以删除.添加.禁言群友 可以与聊天室里的人进行临时会话(与qq群一样) 可以在群中发图片 可以与好友一对一发文件 知识必备: django html\css\js bootstrap jquery, ajax 前景介绍 首先我们知道http是无状态.请求/响应模式的通信模式,就是用户每次通过浏览器点击一下页面,都…

目录:https://segmentfault.com/a/1190000000349384 原文: https://segmentfault.com/a/1190000000361440 到目前为止我们讨论了Bower.AngularJS.GruntJS和PhoneGap等JavaScript技术.今天是“30天学习30种新技术”挑战的第15天,我决定重返JavaScript,学习Meteor框架.虽然Meteor的文档相当好,但是它缺少为初学者准备的教程.我觉得教程的学习效果更好,因为教程可…

在过去的一年里,我在从头开始开发我的第一个重要的Web应用.经验教会了很多以前不知道的东西,特别是在安全性和用户体验方面. 值得一提的是,我上一次尝试构建的任何合理复杂性是在2005年.所以,在安全防御方面,我还有很多东西需要去补充. 即使在那些我已经知道或已经遇到过的东西之外,下面这个清单的细节在开发Web应用时也非常容易忘记,尤其是你才刚刚起步的时候. 这个清单可能在某些方面不尽详细,如果你是一位经验丰富的开发者,我怀疑这里将不会有什么东西会让你感到惊奇.但是,我希望它对那些可能遗落了一些东…

在过去的一年里,我在从头开始开发我的第一个重要的Web应用.经验教会了很多以前不知道的东西,特别是在安全性和用户体验方面. 值得一提的是,我上一次尝试构建的任何合理复杂性是在2005年.所以,在安全防御方面,我还有很多东西需要去补充. 即使在那些我已经知道或已经遇到过的东西之外,下面这个清单的细节在开发Web应用时也非常容易忘记,尤其是你才刚刚起步的时候. 这个清单可能在某些方面不尽详细,如果你是一位经验丰富的开发者,我怀疑这里将不会有什么东西会让你感到惊奇.但是,我希望它对那些可能遗落了一些东…

在上一篇文章,我们已经使用Sequelize连接上了数据库,并能进行简单的数据库操作,在此基础上,我们试着来开发一个完整的项目.这篇文章我们从用户的注册.登录着手,试着开发用户模块的相关的代码. 用户注册 1. 注册逻辑 用户注册的逻辑很简单: 客户端:用户输入输入账号,密码等信息进行用户注册: 服务端:接收到客户端提交的注册信息后,进行字段的检验(是否必填.字段长度等),字段符合要求后,根据用户注册的账号查询数据库,根据返回结果判断该用户是否是新用户,如果是新用户,将用户信息写入到数据库,完成…

前言 这是我的毕业设计.刚开始确定这个课题的时候是因为以前有稍微研究过一些XMPP协议,在这个基础上做起来应该不难.然后开始选技术的时候还有半年,我想为什么不从更底层做起呢!那就不用XMPP,当时接触过相关的即时通讯技术还有WebSocket,那为什么直接从更底层的Socket开始封装呢服务端就用Go语言吧,用来做IM服务器和HTTP服务器都很好. 技术选型 既然是基于Socket,iOS端我并不准备中C语言的Socket开发封装起,而是使用一个第三方库CocoaAsyncSocket.XMPP…

项目代码 项目代码 体验一下 空格开始,左右箭头控制移动 体验一下 Phaser简介 Phaser是一个HTML5游戏框架.它使用了许多HTML5 API,例如Canvas,WebGL,Audio,Gamepad等,并添加了一些有用的逻辑,例如管理游戏循环并为我们提供了物理引擎. 使用Phaser,我们可以只用HTML,CSS和JavaScript来构建2D游戏. 项目需求 在使用Phaser构建Breakout克隆之前,让我们首先定义游戏的范围: 这款单人游戏具有30个积木,一个球拍和一个球的…

代码地址:https://github.com/cheer4chai/webpack-learning 仿照vue-cli开发这个工具的目的是了解webpack的基本设置,以及vue-cli的工作原理 Series1.简单的打包构建功能 webpack的配置很简单: 设置好入口文件:entry,输出文件:output // webpack.config.js module.exports = { entry: { bundle1: './main1.js', bundle2: './main2.…

自己写的组件 有的也挺好的,为了方便以后用自己再用或者给别人用,把组件打包发布到npm是最好不过了,本次打包支持 支持正常的组件调用方式,也支持Vue.use, 也可以直接引用打包好的js文件, 配合vue.js 就不需要webpakc这种构建工具了,可以直接在页面内使用,下面以 ‘yyl-npm-practice’ 这个包为例 第一步:使用 vue init webpack-simple yyl-npm-practice   初始化项目 提示: 不要用 vue init webpack npm…

一.Spring Boot Starter简介 Starter是Spring Boot中的一个非常重要的概念,Starter相当于模块,它能将模块所需的依赖整合起来并对模块内的Bean根据环境( 条件)进行自动配置.使用者只需要依赖相应功能的Starter,无需做过多的配置和依赖,Spring Boot就能自动扫描并加载相应的模块. 总结: 1.它整合了这个模块需要的依赖库: 2.提供对模块的配置项给使用者: 3.提供自动配置类对模块内的Bean进行自动装配: 例如,在Maven的依赖中加入sp…

前言 "纸上得来终觉浅,绝知此事要躬行."虽然node一直在断断续续地学,但总是东一榔头西一榔头的,没有一点系统,所以打算写一个项目来串联一下之前的学习成果. 为什么选择Eggjs呢?其实我觉得如果是个人开发或者小型项目Koa就足够轻量与灵活了,但是如果是有过团队开发的经历,就会更注重项目的管理.Eggjs项目相对于Koa我比较看中的有以下几点: 完善的文档,这意味不管是交接还是项目有新成员加入,直接把官方文档甩出去就行了,而且官方文档同时也是一个很好的学习材料: Egg 奉行『约定优…

1. 创建目录结构.在前面的章节Creating First Yii Application写的yiic工具可以帮助我们快速完成这步. 2. 配置 application.就是修改application配置文件.这步有可能会写一些application部件(例如:用户部件) 3. 每种类型的数据都创建一个 model 类来管理. 同样,yiic可以为我们需要的数据库表自动生成active record active record 类. 4. 每种类型的用户请求都创建一个 controller 类…

上一篇中我们编写了用户注册登录.登录的代码,学习了如何进行用户的认证(JWT),如何安全地存储用的密码(hash).这一篇我们有以下2个任务: 获取token中的数据: 通过model来同步数据库. 获取token中的数据 用户登录的时候我们已经用户的一些基本信息加密存储到token中,通过路由配置我们能简单的去控制哪些接口需要登录,哪些接口不需要登录,但是如果再细化到用户或者用户角色,只是从路由层面就难以控制了,我们需要拿到用户信息,并将用户信息存储在session中,方便我们随时取用.那要怎…