把Chrome变成编辑器

让chrome浏览器变成在线编辑器

在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑话,也喜欢烧菜做饭,虽然大多是为了减减压,这样看来和常人没什么不一样. " 程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧:在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,

开发一个简单的chrome插件-解析本地markdown文件

准备软件环境 1. 软件环境首先,需要使用到的软件和工具环境如下: 一个最新的chrome浏览器编辑器vscode 2. 使用的js库代码高亮库:prismjs https://prismjs.com/download.html markdown解析库:marked.min.js https://github.com/markedjs/marked 搭建工程创建一个md-reader目录,进入md-reader目录 1. 目录结构然后,创建需要的文件 md-reader |----sr

多了解一下Chrome开发者控制台

多了解一下Chrome开发者控制台 2017年10月14日 • Tools, Web前端 • 1.0k views • 暂无评论作为一名前端开发者,Chrome内置的控制台是必须了解的,它拥有非常丰富的特性功能,对我们的开发帮助灰常大! 1.元素选择器($) 如果你接触过JQuery,那么对$()肯定不陌生,这是元素选择器,用来选择HTML元素,但现在,我们要了解的是控制台中的$(). 打开百度,按F12打开控制台 $() 相当于JavaScript中的 document.querySelec

Javascript新手集中营

javascript是世界上最流行的编程语言,也许没有之一,看看github,stackoverflow上面的开源项目和问答就可略知一二.它可以用来开发web app.服务器.或者联合native开发hybird app,等等.或许你感觉不到它的存在,但实际上javascript已经无处不在了!! 在学习javascript之前,我们需要一个开发环境,以便做一些简单的练习,熟话说,工欲善其事,必先利其器. 浏览器,推荐chrome 文本编辑器,推荐sublime text2 你没看错

优秀的前端project如何制定一个老师--html学习路径

一个好的前端project教师发展,不是一蹴而就,它需要大量的学习和积累. 至于谁刚开始学习的人,如何入门.学习如何选择我的路线,做了各种工具? 1. 学习之前 1.不要着急看一些复杂网页效果的代码.这样除了打击你自信心,什么也学不到.没达到一定的武功水平.割了小JJ也学不会葵花宝典的 2.别急着加技术交流QQ群,加牛人QQ. 假设你找张三丰交流武功,你上去第一句问"丰哥,where is 丹田?",你会被他一掌劈死的 3.看网上什么多少天精通web开发.啥啥啥从入门到精通,这样的教

『翻译』Access USB Devices on the Web

https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web Access USB Devices on the Web 访问USB设备通过Web By François Beaufort Dives into Chromium source code If I said plain and simple "USB", there is a good chance that you wil

Markdown 使用教程

前言以前经常在 github 中看到 .md 格式的文件,一直没有注意,也不明白为什么文本文档的后缀不是 .txt ,后来无意中看到了 Markdown,看到了用这个东西写得一些web界面等特别的规整漂亮,顿时不明觉厉.后来自己学习了一下,感觉这个语言确实简洁.美观,现推荐出来供大家学习和玩玩,希望能对你有用. 本文图文并茂,避免了单纯看语法的枯燥和繁琐,其实,学习一门新东西真的其乐无穷! 简介 Markdown 是一种用来文本处理的轻量级「标记语言」,它用简洁的语法代替排版,而无需像Mic

【原创】【1】rich editor系列教程。前期准备，兼容

[1]前期准备,兼容索引目录:http://www.cnblogs.com/henryli/p/3439642.html rich editor的原理无非是启用iframe的编辑模式或者div的contenteditable=true.然后使用document.execcommand来编辑选取文本.但会使用到selection操作和range. 查看api: msdn地址,mozilla富文本编辑指引.w3school range. 使用iframe作为编辑器的优势:独立的编辑document

【HTML5校企公益课】第一天

1.搭建基本的开发环境.学校电脑用的是浏览器是Chrome,编辑器是HBuilder. 2.初步介绍HTML5的Web项目基本结构. css:样式表 img:存放图片 js:存放脚本文件 .html:网页 3.上午进行了一下初步尝试,内容基本可以用下面的代码概括:    <!DOCTYPE html> <!-- html标

Chrome插件LiveStyle结合Sublime Text3编辑器实现高效可视化开发

LiveStyle是Chrome中提高开发效率的一款CSS编辑器插件.利用LiveStyle和Sublime Text3编辑器结合可实现可视化开发,一次配置,简单易用! 本文由前端交流QQ群管理员——訫♂染提供!特此感谢. LiveStyle官方网站:http://livestyle.emmet.io/ LiveStyle和Sublime Text3配置说明一.安装并启动Chrome浏览器,进入Chrome APP站点:https://chrome.google.com/webstore/ca

Wordpress编辑器（Tinymce）在Chrome中动态修改图片大小

Chrome不支持tinymce中图片动态修改大小,可以在theme的functions.php中加入下面代码在Tinymce中模拟这一功能: function tinymce_editor_settings($settings) { $settings['webkit_fake_resize'] = 1; return $settings; } add_filter('tiny_mce_before_init', 'tinymce_editor_settings');原文出处:http://w

把Chrome浏览器变成文本编辑器

CoderWall 分享的一个小技巧. 在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,回车即可把浏览器变临时编辑器. 按f12,在<html>处加入属性contenteditable,可动态编辑整个页面.

ueditor编辑器插件 chrome中图片上传框延时问题

最近在项目中使用ueditor插件进行文字的在线编辑功能时,发现这个插件的图片上传弹框在chrome浏览器延迟非常的厉害.经过多方搜索,终于解决.现将解决方案记录如下: 1.修改/Ueditor/dialogs/image/image.js文件的第370行处,将 mimeTypes: 'image/*' 修改为:mimeTypes: 'image/jepg,image/png.image/jpg'.如图: 2.修改/Ueditor/ueditor.all.js文件的第24431行,将 accep

-_-#ueditor编辑器chrome浏览器下只能复制最后一行

被过滤掉了

chrome编辑器与截图

在地址栏中输入 data:text/html,<html contenteditable>即可使用编辑功能,打开控制台,ctrl + shift + p 调用命令面板,输入 capture 即可显示截图功能选项

15个关于Chrome的开发必备小技巧[译]

谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及debugger这些常用的调试技术,或许你已经了解.在本篇文章中,我们将介绍15个炫酷且实用的技巧,这将更快的提高你的开发效率. 该篇博客原文地址:http://www.cnblogs.com/giggle/p/5966991.html 一.快速查找文件如果你使用过Sublime,那么你会知道’Go

玩转Vim 编辑器

一:VIM快速入门 1.vim模式介绍以下介绍内容来自维基百科Vim 从vi演生出来的Vim具有多种模式,这种独特的设计容易使初学者产生混淆.几乎所有的编辑器都会有插入和执行命令两种模式,并且大多数的编辑器使用了与Vim截然不同的方式:命令目录(鼠标或者键盘驱动),组合键(通常通过control键(CTRL)和alt键(ALT)组成)或者鼠标输入.Vim和vi一样,仅仅通过键盘来在这些模式之中切换.这就使得Vim可以不用进行菜单或者鼠标操作,并且最小化组合键的操作.对文字录入员或者程序员可以大

好用的Markdown编辑器一览 readme.md 编辑查看

https://github.com/pandao/editor.md https://pandao.github.io/editor.md/examples/index.html Editor.md —— 国人开发 Markdown 在线编辑器 Editor.md A simple online markdown editor. Editor.md是一个基于jQuery和CodeMirror构建的在线Markdown文档编辑器. 主要特性支持Markdown标准和Github风格: 支持实时

chrome拓展开发实战：页面脚本的拦截注入

原文请访问个人博客:chrome拓展开发实战:页面脚本的拦截注入目前公司产品的无线站点已经实现了业务平台组件化,所有业务组件的转场都是通过路由来完成,而各个模块是通过requirejs进行统一管理,在灰度测试时会通过grunt进行打包操作,虽然工程化的开发流程已经大大提升了效率,但是为了满足不同平台在任意业务入口页面一键注入业务脚本即可进行测试的实际需求,团队尝试通过chrome拓展来进行实现.由于我本人是第一次开发chrome拓展插件,所以开发的过程中遇到不少坑,某些功能的实现方式也未必是最

Chrome插件（Extensions）开发攻略

本文将从个人经验出发,讲述为什么需要Chrome插件,如何开发,如何调试,到哪里找资料,会遇到怎样的问题以及如何解决等,同时给出一个个人认为的比较典型的例子——获取网页内容,和服务器交互,再把信息反馈给用户.OK,准备开始吧,我尽量把文章写得好看点,以免读者打瞌睡. 目录为什么需要为什么是Chrome 需要准备什么如何开始 Page Action Chrome插件结构学习资料我的例子调试调试Content Scripts 调试Background 调试Popup 一些问题总结为

巴特西