Turning chrome into an online editor

Last Update:2014-10-13 Source: Internet

Author: User

Tags php editor

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

In most people's eyes, the Technology House gives people the impression that they are silent and cannot fully understand what they think, so they can keep a distance from each other. As a half-programmer, I think the real technology house has been entertaining for most of the time. It is the same as the geeks of most people. programmers also love to joke, I also like cooking and cooking. Although most of them are for decompression, it seems similar to ordinary people.

" 程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧：在浏览器地址栏中输入一行代码：data:text/html, 
 
 
Why does it work?
This uses the data Uri's format and tells the browser to render HTML. Contenteditable is an attribute of html5. therefore, this tip can only be used in modern browsers that support this attribute. (IE 8-No)
 
 
 
 
The interesting content is still below
Many programmers, inspired by Jose, began to process and transform this line of code.
● Jakeonrails is changed to supportRuby code highlighted EditorHttps://gist.github.com/4666256

 
 
Code:
 
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
 
● Slawdan says:ACE/mode/Ruby changedACE/mode/PythonThen we get a python editor. Other languages.
 
 
 
● JdkananiSubsequently added: (updated at 22:06:48, January 30)
 

  
 
   
   To support syntax highlighting in other languages, replace 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 
   Other ...... 
   The highlighted style of jakeonrails syntax uses monokai. 
   If you want to change to another style, replace ACE/theme/monokai: 
   Eclipse-> ACE/theme/eclipse 
   Textmate-> ACE/theme/textmate 
   Other ...... 
   

 
 
If you do not want to copy or paste the code, you can directly stamp the following links.:
 
 
Ruby Editor, Python Editor, PHP Editor, JavaScript Editor, Java Editor, C/C ++ Editor (these links can also be used as browser bookmarks for favorites .)
 
● Transformation of Montas: You can use textarea and make it "invisible" if you want autofocus.
 
 
Data: text/html, <Textarea Style="Font-size: 1.5em; width: 100%; Height: 100%; Border: none; outline: none" Autofocus/>
 
 
Or directly stamp the link.
 
 
● Bgrins Transformation: when the content is edited, the background color is automatically changed; when the content is stopped, the background color is changed to white.
 
data:text/html, <html><head><link href=‘http://fonts.googleapis.com/css?family=Open+Sans‘ 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;">
 
● Fvsch Transformation:
 
 
Data: text/html, <Body ContenteditableStyle="Font-size: 2rem; line-Height: 1.4; max-width: 60rem; margin: 0 auto; padding: 4rem ;">
 
 
Or directly stamp the link.
 
 
That's all about these odd sex techniques.
 
 
 
 
 

 
 
   
   1: Go to theme 1 Editor 2: Go to theme 2 Editor 3: Go to theme 3 editor 4: Go to drawing 
   

 
 
 
 
Google Chrome is a very popular tool (I use it as a tool to improve my efficiency) and deserves our research.
 
 
 
 
 
<Reference: http://www.36kr.com/p/201096.html & http://blog.jobbole.com/32823/>
 

 
Turning chrome into an online editor

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More