一行代码,打造一个在线编辑器

2013 - 2 - 26 作者 : Jimco 分类 : JavaScript

    前不久就看过这段网上分享的代码,那时候还是简陋的编辑框,当时还想着找个时间来优化改造~ 事实证明,缺少行动,再牛逼的创意都只也是你的白日梦。Mark 下这段代码,同时,牢牢记住,“你不努力,装怂给谁看~“

data:text/html,
<style type="text/css">
#editor {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  font-size:16px;
}
</style>
<div id="editor"></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="mySecretKeyz";
$(document).ready(function(){
    var e = ace.edit("editor");
    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/javascript");
       e.setValue(data);
      }
    });

    $("#editor").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>

Demo

分享自:36氪

10854 人围观 / 7 条评论 ↓快速评论↓

  • 没有专业的技能,对代码跟本不懂的

    hostgator 2013-03-19 14:08 回复

  • 原来是这样,果然需要多学习,一个人埋头苦干什么也做不出来~

    战神娱乐场 2013-03-15 10:00 回复

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by Jimco

©2013 前端那些事儿 Designed by Jimco

About me|意见反馈