代码在线编辑器发布 – 支持在线编辑/保存HTML代码
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务: 点此联系我
之前在国外的一个网站发现了一个在线的HTML、JavaScript代码的调试器,可以在线编写HTML、JavaScript代码,该工具还提供了大量的Javascrīpt框架,包括ProtoType、JQuery、YUI等,点选即可添加到你的代码中,最值得称道的是在线编写的代码可以保存到一个短网址,通过该网址可以查看代码运行情况。
看着这个不错的东西,我手也痒痒,想着咱也来写个这样的程序,看看能不能写得出来,随便练习一下PHP和JavaScript的代码编写能力。于是花了3天的时间写了这么个简易的在线代码编辑器,虽然是仿制别人的功能,但是实现起来也不容易,3天中的一天就完全浪费在研究静态短网址的rewrite规则上,做了很多次失败的实验,最终成功把我的顶级域名 ludou.org 解析到了服务器的一个子目录,由此我得出一条结论:功夫不负有心人!废话少说,下面来介绍一下我写的这个工具:
工具网址:
功能用途:
- 可在线编辑调试网页前端代码,支持HTML、CSS、JavaScript、XML等;
- 代码编辑过程中,提供代码高亮,自动缩进和括号匹配的功能;
- 代码编辑完成后,可以在线运行和保存代码
简单的功能介绍就这些,如果你也写博客,如果你也像我一样经常展示一些HTML代码,那么该工具对你来说是很有帮助的。举例来说,CSS边角折叠实战这篇文章里面就贴了一段HTML代码,如果让读者自己新建一个html文件,然后复制粘贴保存这段代码来查看效果,相信很多读者都不愿意,而如果通过一个短网址 http://codecan.duapp.com/code/5748yv 就可以查看代码的运行结果,相信会方便很多。
使用方法:
- 在代码输入框内输入、编辑代码;
- 通过点击页面左下角的"运行代码"和"保存代码",可实现相应的功能;
- 代码保存成功后你可得到一个短网址,如:http://codecan.duapp.com/code/5748yv,通过该网址可预览HTML代码运行结果;
- 如果你想修改已保存的代码,请在本站提供的代码短网址后面添加 /edit 即可,如:http://codecan.duapp.com/code/5748yv/edit
- 本程序不支持频繁的保存代码,也不支持保存过长或过短的代码;
-- 完 --
本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜即刻 https://www.ludou.org/web-code-editor.html
沙发,哈哈已经体验,效果不错。但是不知道是否这样对于顶级域名的权重有影响呢?因为用这个顶级域名挂了这个编辑器在上面。
@酷剑 在通常情况下,顶级域名和子域名www,搜索引擎是分开对待的,也就是说它们是两个不同的网站,但是大多数Web服务器都会将顶级域名自动跳转到www,或者将www自动跳转到顶级域名,所以很多人会误以为这是同一个东西。
我的博客使用的是www.ludou.org这个子域名,在此之前顶级域名是默认跳转到www的,而且搜索引擎收录的都是www,所以顶级域名指到编辑器对www域名不会有影响。
@Ludou 功能挺好的,呵呵,ludou很厉害哦。
@Ludou 这个东西不错,不过这个会不会被一些恶意代码保存,这样你的网址存在恶意代码会被惩罚是理所当然的。
工具怎么挂靠在顶级域名下面啊。
@rainforever 顶级域名较短。
赞一个,不错!
牛人啊 在别的地方听过楼主
牛人一个!支持!要多向你学习!
哈哈。。。不错,实验了一下
囧~ 我自动跳转了?
@老饕 呵呵,WordPress程序将.htaccess的Rewrite规则覆盖了,现在已经修复。
这个好,改天试下~
這個在綫編輯器不好玩,要是有人搗亂呢?
http://ludou.org/b
@Arthur 如果你是程序的作者,你也应该知道要想全部过滤此类恶意代码,几乎是不可能的事情,而且编辑器是支持JavaScript的。唯一能做的就是人工审查。
@Ludou 呵呵,开个玩笑!
你好,今天我看你的文章,我觉得可以实现这个一个功能:就是把文件可以在线编辑、预览、保存。这里指的文件是 类似word结构。
今天弄了一个下午的CKeditor,只是只是能在线编辑,不能实现文件的保存和下载,我希望你可以给我一些帮助。
@zhmh 本文介绍的工具,内容保存在数据库中。
关于CKeditor,它提供了多种语言的程序例子,你可以参考如果从CKeditor获取内容,然后保存到文件,文件下载只是提供个文件链接而已。
CODE保存时间有限制吗?
@lioff 暂时没有
无意中进来的,WP的插件有RUNCODE不过不太好用,每次要在前面加上<code> 等代码才能实现。
你这样也不好,不能在文章中调用显示,只能说是一个独立的工具。
我后来找了个,效果还行,我BOLG上有演示,哈哈。看下效果。http://www.w2z.net/index.php/archives/49