#极氪# 仅一行代码,打造一个在线编辑器 | 36氪


在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离。作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑话,也喜欢烧菜做饭,虽然大多是为了减减压,这样看来和常人没什么不一样。

不一样的地方,技术宅崇尚极致,喜欢极简,又希望简约不简单,背后就是技术宅满心思的不断的尝试,我正在看着一出好戏在上演:

" 程序员 Jose Jesus Perez Aguinaga 在 CoderWall 分享了一个小技巧:在浏览器地址栏中输入一行代码:data:text/html, <html contenteditable> ,回车即可把浏览器变临时编辑器(需要浏览器支持 HTML5 属性 contenteditable)。不少程序员受 Jose 的启发,开始对这行代码加工改造,比如改成支持 Ruby 语法高亮的编辑器……"

从引子中可以看到,本来只是简短的小段代码: data:text/html, <html contenteditable>,经过程序员们不断改造,从一个简单的可编辑页面,逐步变成了包括支持 Java、Ruby、Python 等多种 编程语言高亮的代码编辑器,截至不到 1 个小时的最后更新,我已经看到了一个和 notepad.cc 网站功能相近,使用了第三方网站数据库 API 服务存储内容的 在线编辑器 了:

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>

将以上代码完整复制,粘贴到 Chrome 或者 Firefox,Safari 浏览器地址栏中(不支持低版本 IE 浏览器),回车打开,稍等片刻一个支持 CTRL + S 保存内容的在线编辑器呈现眼前。

仅一行代码,实现功能相当于系统的记事本程序,感慨技术宅的艺术造诣吧?~

Update: 感谢 @问题青年a 提供 CoderWall 分享原文。

via http://kan.weibo.com/con/3550649317352120?_from=title

当然可以,不过这需要进行比较复杂的前端开发。以下是一个简单的示例代码,供您参考: ```html <!DOCTYPE html> <html> <head> <title>汽车配置</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .container { display: flex; flex-wrap: wrap; margin: 20px; } .item { flex: 1 0 25%; margin: 10px; padding: 20px; border: 1px solid #ccc; border-radius: 5px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; } .item:hover { transform: scale(1.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } .selected { background-color: #008CBA; color: #fff; } button { display: block; margin: 20px auto; padding: 10px 20px; border: none; border-radius: 5px; background-color: #008CBA; color: #fff; font-size: 16px; cursor: pointer; transition: all 0.2s ease-in-out; } button:hover { background-color: #006E8C; } </style> </head> <body> <div class="container"> <div class="item" data-name="颜色" data-selected="false" data-options="红色,蓝色,黑色"> <h2>颜色</h2> <p>请选择您喜欢的颜色</p> <ul> <li>红色</li> <li>蓝色</li> <li>黑色</li> </ul> </div> <div class="item" data-name="座位材质" data-selected="false" data-options="皮质,织物"> <h2>座位材质</h2> <p>请选择您喜欢的座位材质</p> <ul> <li>皮质</li> <li>织物</li> </ul> </div> <div class="item" data-name="音响" data-selected="false" data-options="普通,高级"> <h2>音响</h2> <p>请选择您喜欢的音响类型</p> <ul> <li>普通</li> <li>高级</li> </ul> </div> <div class="item" data-name="轮毂" data-selected="false" data-options="16寸,17寸,18寸"> <h2>轮毂</h2> <p>请选择您喜欢的轮毂尺寸</p> <ul> <li>16寸</li> <li>17寸</li> <li>18寸</li> </ul> </div> </div> <button id="submit-btn">提交</button> <script> const items = document.querySelectorAll(&#39;.item&#39;); const submitBtn = document.getElementById(&#39;submit-btn&#39;); let selectedItems = []; // 点击选项 items.forEach(item => { const options = item.dataset.options.split(&#39;,&#39;); const ul = item.querySelector(&#39;ul&#39;); options.forEach(option => { const li = document.createElement(&#39;li&#39;); li.textContent = option; li.addEventListener(&#39;click&#39;, () => { if (item.dataset.selected === &#39;false&#39;) { selectedItems.push({ name: item.dataset.name, value: option }); item.dataset.selected = &#39;true&#39;; li.classList.add(&#39;selected&#39;); } else { selectedItems = selectedItems.filter(item => item.value !== option); item.dataset.selected = &#39;false&#39;; li.classList.remove(&#39;selected&#39;); } }); ul.appendChild(li); }); }); // 提交选择结果 submitBtn.addEventListener(&#39;click&#39;, () => { console.log(selectedItems); // 在这里可以将选择结果发送到后端进行处理 }); </script> </body> </html> ``` 这是一个简单的汽车配置页面,包含了选择颜色、座位材质、音响和轮毂尺寸等选项。您可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值