`
AJAXHu
  • 浏览: 54832 次
文章分类
社区版块
存档分类
最新评论

仅在地址栏输入简单代码,浏览器变编辑器

 
阅读更多

将浏览器变成编辑器?很简单,效果也很炫:


打开浏览器(不支持IE低版本),输入下面代码:

data:text/html,
<style type="text/css">
#e {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  font-size:16px;
}
</style>
<div id="e"></div>
<script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js"></script>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script>
var myKey="SecretKeyz";
$(document).ready(function(){
    var e = ace.edit("e");
    var url = "http://api.openkeyval.org/"+myKey;
    $.ajax({
      url: url,
      dataType: "jsonp",
      success: function(data){
       e.setTheme("ace/theme/tomorrow_night_eighties");
       e.getSession().setMode("ace/mode/markdown");
       e.setValue(data);
      }
    });

    $("#e").on("keydown", function (b) {
      if (b.ctrlKey && 83 == b.which) {
        b.preventDefault();
        var data = myKey+"="+encodeURIComponent(e.getValue());
        $.ajax({
          data: data,
          url: "http://api.openkeyval.org/store/",
          dataType: "jsonp",
          success: function(data){
            alert("Saved.");
          }
        });
      }
    });
});
</script>


回车,浏览器变为编辑器:


分享到:
评论

相关推荐

    WebTeX 可视化网络公式编辑器源码

    WebTeX 网络公式可视化编辑器 的源码分为两部分。一部分是核心源码,是一个基于TeX/LaTeX的CGI应用程序、dll组件或浏览器插件。另一部分是基于ASP/PHP/ASP.NET/JSP的输入TeX/LaTeX指令的可视化编辑器源码,它可在线...

    Google Chrome 6.0.451.0 Dev 版(一个由Google公司开发的网页浏览器)

    它可以让您在浏览器中轻松编码,这样,您就不必在浏览器和代码编辑器之间切换。同时,您还可以在电脑上保存参考代码供日后使用。 [编辑本段]Chrome 浏览器市场占有率新突破  根据 Net applications 公布的数字,...

    销售管理系统源代码 Java

    进入系统步骤:首先确认系统安装路径是安装本地服务器还是网络服务器,例如我系统安装路径为D:\eclipse\workspace,则我打开再IE地址栏输入 D:\eclipse\workspace\TestTomcat\WebContent\admin\Index.jsp 在用户名...

    IE,firefox(火狐)浏览器无提示关闭窗口js实现代码小结

    经软件开发网编辑整合的版本:注意 如果你使用的是firefox浏览器必须要做以下设置 1、在地址栏输入about:config然后回车,警告确认 2、在过滤器中输入”dom.allow_scripts_to_close_windows“,双击即可将此值设为...

    只需一行代码,轻松实现一个在线编辑器

    在浏览器地址栏中输入一行代码:data:text/html, &lt;html contenteditable&gt; ,回车即可把浏览器变临时编辑器(需要浏览器支持 HTML5 属性 contenteditable)

    JAVA上百实例源码以及开源项目

    在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除…… Java Socket 聊天...

    Java销售管理系统源代码+数据库

    进入系统步骤:首先确认系统安装路径是安装本地服务器还是网络服务器,例如我系统安装路径为D:\eclipse\workspace,则我打开再IE地址栏输入 D:\eclipse\workspace\TestTomcat\WebContent\admin\Index.jsp 在用户名...

    网际畅游 MyIE 3.0 源代码

    域名完成:在地址栏输入网址时可以用Ctrl+Enter, Shift+Enter, Ctrl+Shift+Enter来帮你完成这个网址。他会为你加上http://www.及相应的后缀如:.com, .net, .com.cn。你可以在MyIE选项中修改它们。 一次打开窗口...

    Basisbbs最易论坛 1.1.0.rar

    更改了以往通过地址栏明文传递论坛组及分论坛名称,改为浏览器后台传输,缩短地址,避免乱码。 修改原发表主题自动返回时间从原5秒改为3秒 修改原发表回复自动返回时间从原3秒改为2秒 修改上传文件后从原来自动...

    WinHex V15.1 和 V16.7 汉化版

     在WinHex中集成了强大的工具,包括磁盘编辑器,Hex转换器和RAM编辑工具,并能够方便的调用系统常用工具如:计算器,记事本,浏览器等。使用十分方便。按 F9,弹出磁盘编辑器对话框,首先选择磁盘分区,然后按确定...

    vc++ 应用源码包_6

    实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史地址的清除、清楚表单自动完成历史记录、清楚自动密码历史记录、清除收藏夹中的内容、清除RAS自动拨号历史记录、清除系统临时文件夹、清空回收站、清除...

    vc++ 应用源码包_5

    实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史地址的清除、清楚表单自动完成历史记录、清楚自动密码历史记录、清除收藏夹中的内容、清除RAS自动拨号历史记录、清除系统临时文件夹、清空回收站、清除...

    KODExplorer 芒果云-资源管理器

    - 文件编辑器,文件树目录 上下左右键盘切换 快捷键加入 - 树目录去掉库,改为个人目录等多处文案修改 - 默认打开用户目录 ####fix bug:(bug解决和程序优化) - 桌面任务栏点不中bug - 部分文案问题 - 众多...

    chrome.exe

    Chrome 31.0.1650.63包含15个安全修复,例如同步会话的302定向、v8缓冲区溢出、模态对话框中的地址栏欺诈…… Chrome 31支持Web支付,在用户的授权下,Web开发人员可以通过程序调用浏览器的自动填充数据。这样,在...

    《JavaScript实例精通》[源代码]

    示例描述:页面中的链接地址个性化。 10_1.htm 按时消失的链接。 10_2.htm 带滚动提示的链接。 10_3.htm 动态变换的链接。 10_4.htm 滚动链接。 10_5.htm 不断闪动的链接。 10_6.htm 在按钮上显示不同的...

    vc++ 开发实例源码包

    实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史地址的清除、清楚表单自动完成历史记录、清楚自动密码历史记录、清除收藏夹中的内容、清除RAS自动拨号历史记录、清除系统临时文件夹、清空回收站、清除...

    Java开发技术大全(500个源代码).

    代码范例列表 第1章 示例描述:本章演示如何开始使用JDK进行程序的开发。 HelloWorldApp.java 第一个用Java开发的应用程序。 firstApplet.java 第一个用Java开发的Applet小程序。 firstApplet.htm 用来装载...

    IIS6.0 IIS,互联网信息服务

    四、在Vista系统中安装IIS7.0相对于早先的版本,IIS 7.0 带来了许多引人注目的新特色新功能,比如基于 Microsoft .NET Framework 的全局配置文件,可简单地通过文本编辑器或 Microsoft Visual Studio 编辑;...

    ARM开发工具ADS原理与应用 读书笔记

    第5章 编辑器及浏览器 5.1 编辑器窗口功能介绍 5.2 搜索和替换操作 5.2.1 搜索和替换的方法 5.2.2 使用习惯表达式的一般规则 5.2.3 搜索操作命令 5.3 编辑操作命令 5.4 编辑器设置 5.4.1 编辑器设置面板 5.4.2 字体...

Global site tag (gtag.js) - Google Analytics