如何将chrome浏览器作为临时编辑器-xiangfei01-ChinaUnix博客

xiangfei01bens.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

xiangfei01

博客访问： 371118
博文数量： 75
博客积分： 2773
博客等级：少校
技术积分： 765
用户组：普通用户
注册时间： 2010-08-10 13:09

文章分类

全部博文（75）

内核与驱动（3）
JavaScript（3）
DataBase（2）
密码安全（4）
开发工具（9）
项目管理（2）
Linux调试（11）
算法与数据结构（4）
常用网址（4）
Linux应用技术（10）
程序开发（23）
未分配的博文（0）

文章存档

2019年（3）

2017年（4）

2015年（3）

2013年（5）

2012年（11）

2011年（45）

2010年（4）

我的朋友

最近访客

推荐博文

如何将chrome浏览器作为临时编辑器

分类： Html/Css

2013-01-31 10:17:39

Jose 在CoderWall 分享的一个：在浏览器地址栏中输入一行代码：data:text/html, ，回车即可把浏览器变临时编辑器。

为什么它能奏效？

这是用了数据URI的格式（Data URI’s format），并告诉浏览器渲染 HTML。不过 contenteditable 是 HTML5 的一个，所以这个小技巧只能用于支持该属性的现代浏览器。（IE 8 – 就不行了）

并非只能纯文字，也可粘贴图片（如下图）。赶紧复制粘贴那行代码，然后回车，来试试呗。

有趣的内容还在下面

不少程序员受 Jose 的启发，开始对这行代码加工改造了。

● jakeonrails 童鞋改成了一个支持 Ruby 代码高亮的编辑器

代码：

		
								data:text/html,

● slawdan 提示说：如果把上面的 ace/mode/ruby 改成 ace/mode/python，那么就得到了一个 Python 版的编辑器咯。其他语言依此类推。

● 后来的补充：（2013-1-30 22:06:48 更新）

		
								改造成支持其他语言语法高亮的，可把 ace/mode/ruby 替换为：
							
								Python -> ace/mode/python
							
								C/C++ -> ace/mode/c_cpp
							
								Javscript -> ace/mode/javascript
							
								Java -> ace/mode/java
							
								Scala -> ace/mode/scala
							
								Markdown -> ace/mode/markdown
							
								CoffeeScript -> ace/mode/coffee
							
								其他……
							
								jakeonrails 语法高亮风格用的是 monokai。
							
								如果需要换成其他风格，，可把 ace/theme/monokai 替换为：
							
								Eclipse -> ace/theme/eclipse
							
								TextMate -> ace/theme/textmate
							
								其他……

● montas 的改造：You can use textarea and make it “invisible” if you want autofocus.

data:text/html,

</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<p style="text-indent:2em;">
	或直接戳 <a href="data:text/html, <textarea style=" font-size:="" 1.5em;="" width:="" 100%;="" height:="" border:="" none;="" outline:="" none"="" autofocus="" >"="" target="_blank">链接</a>。
</p>
<p style="text-indent:2em;">
	<br />
</p>
<p style="text-indent:2em;">
	● bgrins 的改造：编辑内容时，自动变换背景颜色；停止后变换白色。
</p>
<div style="text-indent:2em;">
	<div id="highlighter_393528" class="syntaxhighlighter notranslate xml ie">
		<table border="0" cellspacing="0" cellpadding="0" class="ke-zeroborder">
			<tbody>
				<tr>
					<td class="gutter">
						<div class="line number1 index0 alt2">
							1
						</div>
					</td>
					<td class="code">
						<div class="container">
							<div class="line number1 index0 alt2">
								data:text/html, <html><head><link href='' rel='stylesheet' type='text/css'><style type="text/css"> html { font-family: "Open Sans" } * { -webkit-transition: all linear 1s; }</style><script>window.onload=function(){var e=false;var t=0;setInterval(function(){if(!e){t=Math.round(Math.max(0,t-Math.max(t/3,1)))}var n=(255-t*2).toString(16);document.body.style.backgroundColor="#ff"+n+""+n},1e3);var n=null;document.onkeydown=function(){t=Math.min(128,t+2);e=true;clearTimeout(n);n=setTimeout(function(){e=false},1500)}}</script></head><body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<p style="text-indent:2em;">
	<br />
</p>
<p style="text-indent:2em;">
	● fvsch 的改造：
</p>
<div style="text-indent:2em;">
	<div id="highlighter_997682" class="syntaxhighlighter notranslate xml ie">
		<table border="0" cellspacing="0" cellpadding="0" class="ke-zeroborder">
			<tbody>
				<tr>
					<td class="gutter">
						<div class="line number1 index0 alt2">
							1
						</div>
					</td>
					<td class="code">
						<div class="container">
							<div class="line number1 index0 alt2">
								data:text/html, <body contenteditable style="font-size:2rem;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;">
							</div>
						</div>
					</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<p style="text-indent:2em;">
	或直接戳 。
</p>
<p style="text-indent:2em;">
	<br />
</p>
<p style="text-indent:2em;">
	<br />
</p>                                   </div>
            
            <div class="Blog_con2_1 Blog_con3_2">
              <div>
			  
			  
				<div class="bdsharebuttonbox"><A class=bds_more href="#" data-cmd="more"></A><A class=bds_qzone title=分享到QQ空间 href="#" data-cmd="qzone"></A><A class=bds_tsina title=分享到新浪微博 href="#" data-cmd="tsina"></A><A class=bds_tqq title=分享到腾讯微博 href="#" data-cmd="tqq"></A><A class=bds_renren title=分享到人人网 href="#" data-cmd="renren"></A><A class=bds_weixin title=分享到微信 href="#" data-cmd="weixin"></A></div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
				
			  </div>
              阅读(1768) | 评论(0) | 转发(0) |
			                <div class="HT_line3"></div>
            </div>
            
            <div class="Blog_con3_3">
              <div><span id='digg_num'>0</span><a href="javascript:void(0)" id='digg' bid='3484499' url='/blog/digg.html' ></a></div>
              <p>上一篇：<a href="/uid-20792262-id-3330606.html">linux bash shell之变量替换：:= = :- - =? ? :+ +句法</a></p>
              <p>下一篇：<a href="/uid-20792262-id-5172269.html">硬中断和软中断</a></p>    
            </div>
            
          </div>
          		  
        </div>
      </div>
      <div class="Blog_right1_7" id='replyList'>
		<div class="Blog_tit3">给主人留下些什么吧！~~</div>
				
				
		<div class="Blog_right1_6 Blog_right1_12">
        		</div>
		
        <div class="Blog_right1_10" style="display:none">
          <div class="Blog_tit3">评论热议</div>
		  		 
        <div class="Blog_right1_8">
          <div class="nologin_con1"> 请登录后评论。
            <p><a href="http://account.chinaunix.net/login"  onclick="link(this)">登录</a> <a href="http://account.chinaunix.net/register?url=http%3a%2f%2fblog.chinaunix.net">注册</a></p>
          </div>
        </div>
       
		
        </div>
        <div style="text-align:center;margin-top:10px;">
            <script type="text/javascript" smua="d=p&s=b&u=u3118759&w=960&h=90" src="//www.nkscdn.com/smu0/o.js"></script>
        </div>
      </div>
    </div>
  </div>
  <input type='hidden' id='report_url' value='/blog/ViewReport.html' />

$(function(){

//创建管理员删除的弹出层
		$('#admin_article_del').click(function(){
			$.cover(false);
			asyncbox.open({
				id : 'class_thickbox',
				html : '<div class="HT_layer3_1"><ul><li class="HT_li1">操作原因：<select class="HT_sel7" id="del_type" name="del_type"><option value="广告文章">广告文章</option><option value="违规内容">违规内容</option><option value="标题不明">标题不明</option><option value="文不对题">文不对题</option></select></li><li class="HT_li1" ><input class="HT_btn4" id="admin_delete"  type="button" /></li></ul></div>',
				title : '选择类型',
				width : 300,
				height : 150,
				scroll : 'no',
				callback : function(action){
					if(action == 'close'){
						$.cover(false);
					}
				}
			});
		});
		$('#admin_delete').live('click' , function(){
			///blog/logicdel/id/3480184/url/%252Fblog%252Findex.html.html
			var type = $('#del_type').val();
			var url = '/blog/logicdel/id/3484499/url/%252Fuid%252F20792262.html.html';
			window.location.href= url + '?type=' + type;
		});

//顶  js中暂未添加&过滤 
		$('#digg').live('click' , function(){

if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}

var bid = $('#digg').attr('bid');
			var url = $('#digg').attr('url');

var digg_str = $.cookie('digg_id');
			if(digg_str != null)
			{
				var arr= new Array(); //定义一数组

arr = digg_str.split(","); //字符分割     
				for( i=0 ; i < arr.length ; i++ )   
				{   
					if(bid == arr[i])
					{
						showErrorMsg('已经赞过该文章', '消息提示'); 
						return false;
					}
				} 
			}
			$.ajax({
				type:"POST",
				url:url,	
				data: {
					'bid' : bid 
				},
				dataType: 'json',
				success:function(msg){
					if(msg.error == 0)
					{
						var num = parseInt($('#digg_num').html(),10);
						num += 1;
						$('#digg_num').html(num);
						$('#digg').die();

if(digg_str == null)
						{
							$.cookie('digg_id', bid, {expires: 30 , path: '/'});
						}
						else
						{
							$.cookie('digg_id', digg_str + ',' + bid, {expires: 30 , path: '/'});
						}
						showSucceedMsg('谢谢' , '消息提示');
					}
					else if(msg.error == 1)
					{
						//showErrorMsg(msg.error_content , '消息提示'); 
						showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
					}
					else if(msg.error == 2)
					{
						showErrorMsg(msg.error_content , '消息提示'); 
					}
				}
			});
		});
		//举报弹出层
		/*$('.box_report').live('click' , function(){
			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}
			var url = $('#report_url').val();
			var cid = $(this).attr('cid');
			$.cover(false);
			asyncbox.open({
				id  : 'report_thickbox',
				url : url,
				title : '举报违规',
				width : 378,
				height : 240,
				scroll : 'no',
				data : {
					'cid'	 : cid,
					'idtype' : 2 
				},
				callback : function(action){
					if(action == 'close'){
						$.cover(false);
					}
				}
			});
		});*/

//评论相关代码
		
		//点击回复显示评论框
		$('.Blog_a10').live('click' , function(){
			if(isOnLine == '' )
			{
				//showErrorMsg('登录之后才能进行此操作' , '消息提示');
				showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login');
				return false;
			}

if(allowComment == 1)
			{
				showErrorMsg('该博文不允许评论' , '消息提示'); 
				return false;
			}
			var tid = $(this).attr('toid');//留言作者id
			var bid = $(this).attr('bid');//blogid
			var cid = $(this).attr('cid');//留言id
			var tname = $(this).attr('tname');
                         			var tpl  = '<div class="Blog_right1_9">';
				tpl +=	 '<div class="div2">';
				tpl +=     '<textarea name="" cols="" rows="" class="Blog_ar1_1" id="rmsg">文明上网，理性发言...

'; tpl += '

表情

'; tpl += '

'; $('.z_move_comment').html(''); $(this).parents('.Blog_right1_8').find('.z_move_comment').html(tpl).show(); }); //引用的评论提交 $('#quota_sbumit').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var tid = $(this).attr('tid');//被引用人的id var qid = $(this).attr('cid');//引用的id var url = $(this).attr('url'); var text = $('#rmsg').val(); var tname = $(this).attr('tname'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : tid , 'qid' : qid , 'text': text , 'tname' : tname }, dataType: 'json', success: function(data){ if(data.code == 1){ var tpl = '

'; tpl+= '

' + data.info.header + '

'; tpl+= '

' + data.info.username + '' + data.info.dateline + '

'; tpl+= '

' + data.info.quota.username + '：'+ data.info.quota.content + '

'; tpl+= '

' + data.info.content + '

回复 | 　删除　| 　举报

'; tpl+= ''; tpl+= '

'; $('#replyList .Blog_right1_8:first').before(tpl); $('.z_move_comment').html('').hide(); } else if(data.code == -1){ //showErrorMsg(data.info , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); } }, error: function(){//请求出错处理 } }); }); //底部发表评论 $('#submitmsg').click(function(){ if(allowComment == 1) { showErrorMsg('该博文不允许评论' , '消息提示'); return false; } var bid = $(this).attr('bid'); var toid = $(this).attr('toid'); var text = $('#reply').val(); var url = $(this).attr('url'); if(text == '' || text=='文明上网，理性发言...') { showErrorMsg('评论内容不能为空！' , '消息提示'); return false; } else { if(mb_strlen(text) > 1000){ showErrorMsg('评论内容不能超过500个汉字' , '消息提示'); return false; } } $.ajax({ type: "post", url: url , data: {'bid': bid , 'to' : toid ,'text': text}, dataType: 'json', success: function(data){ if(data.code == 1) { var tpl = '

'; tpl += '

' + data.info.header + '

'; tpl += '

' + data.info.username + '' + data.info.dateline + '

'; tpl += '

' + data.info.content + '

'; tpl += '

回复 | 　删除　| 　举报

'; tpl += ''; tpl += '

'; $('.Blog_tit3:first').after(tpl); $('#reply').val('文明上网，理性发言...'); } else if(data.code == -1) { showErrorMsg(data.info , '消息提示'); } }, error: function(){//请求出错处理 } }); }); //底部评论重置 $('#reset_comment').click(function(){ $('#reply').val('文明上网，理性发言...'); }); //取消回复 $('#qx_comment').live('click' , function(){ $('.z_move_comment').html('').hide(); }); $('#rmsg, #reply').live({ focus:function(){ if($(this).val() == '文明上网，理性发言...'){ $(this).val(''); } }, blur:function(){ if($(this).val() == ''){ $(this).val('文明上网，理性发言...'); } } }); //删除留言确认 $('.comment_del_mark').live('click' , function(){ var url = $(this).attr('url'); asyncbox.confirm('删除留言','确认', function(action){ if(action == 'ok') { location.href = url; } }); }); //删除时间确认 $('.del_article_id').click(function(){ var delurl = $(this).attr('delurl'); asyncbox.confirm('删除文章','确认', function(action){ if(action == 'ok') { location.href = delurl; } }); }); /* //字数限制 $('#rmsg, #reply').live('keyup', function(){ var id = $(this).attr('id'); var left = Util.calWbText($(this).val(), 500); var eid = '#errmsg'; if(id == 'reply') eid = '#rerrmsg'; if (left >= 0) $(eid).html('您还可以输入' + left + '字'); else $(eid).html('您已超出' + Math.abs(left) + '字 '); }); */ //加载表情 $('#face').qqFace({id : 'facebox1', assign : 'reply', path : '/image/qqface/'}); $('#mface').qqFace({id : 'facebox', assign : 'rmsg', path:'/image/qqface/'}); /* $('#class_one_id').change(function(){ alert(123213); var id = parseInt($(this).val() , 10); if(id == 0) return false; $('.hidden_son_class span').each(function( index , dom ){ if( dom.attr('cid') == id ) { } }); }); */ //转载文章 var turn_url = "/blog/viewClassPart.html"; $('#repost_bar').click(function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var id = $(this).attr('bid'); asyncbox.open({ id : 'turn_class_thickbox', url : turn_url, title : '转载文章', width : 330, height : 131, scroll : 'no', data : { 'id' : id }, callback : function(action){ if(action == 'close'){ $.cover(false); } } }); }); /* //转发文章 $('#repost_bar').live('click' , function(){ if(isOnLine == '' ) { //showErrorMsg('登录之后才能进行此操作' , '消息提示'); showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); return false; } var bid = $(this).attr('bid'); var url = $(this).attr('url'); asyncbox.confirm('转载文章','确认', function(action){ if(action == 'ok'){ $.ajax({ type:"POST", url:url, data: { 'bid' : bid }, dataType: 'json', success:function(msg){ if(msg.error == 0){ showSucceedMsg('转发成功！', '消息提示'); }else if(msg.error == 1){ //location.href = '/index.php?r=site/login'; showErrorMsg('操作失败,您需要先登录!', '消息提示', 'http://account.chinaunix.net/login'); }else{ showErrorMsg(msg.error_content, '消息提示'); } } }); } }); }); */ });

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6