代码在线编辑器发布 – 支持在线编辑/保存HTML代码

日期: 标签:Web免费资源在线工具 21 条留言
如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我
文章目录

     之前在国外的一个网站发现了一个在线的HTML、JavaScript代码的调试器,可以在线编写HTML、JavaScript代码,该工具还提供了大量的Javascrīpt框架,包括ProtoType、JQuery、YUI等,点选即可添加到你的代码中,最值得称道的是在线编写的代码可以保存到一个短网址,通过该网址可以查看代码运行情况。

     看着这个不错的东西,我手也痒痒,想着咱也来写个这样的程序,看看能不能写得出来,随便练习一下PHP和JavaScript的代码编写能力。于是花了3天的时间写了这么个简易的在线代码编辑器,虽然是仿制别人的功能,但是实现起来也不容易,3天中的一天就完全浪费在研究静态短网址的rewrite规则上,做了很多次失败的实验,最终成功把我的顶级域名 ludou.org 解析到了服务器的一个子目录,由此我得出一条结论:功夫不负有心人!废话少说,下面来介绍一下我写的这个工具:

工具网址:

     http://codecan.duapp.com

功能用途:

  1. 可在线编辑调试网页前端代码,支持HTML、CSS、JavaScript、XML等;
  2. 代码编辑过程中,提供代码高亮,自动缩进和括号匹配的功能;
  3. 代码编辑完成后,可以在线运行和保存代码

     简单的功能介绍就这些,如果你也写博客,如果你也像我一样经常展示一些HTML代码,那么该工具对你来说是很有帮助的。举例来说,CSS边角折叠实战这篇文章里面就贴了一段HTML代码,如果让读者自己新建一个html文件,然后复制粘贴保存这段代码来查看效果,相信很多读者都不愿意,而如果通过一个短网址 http://codecan.duapp.com/code/5748yv 就可以查看代码的运行结果,相信会方便很多。

使用方法:

  1. 在代码输入框内输入、编辑代码;
  2. 通过点击页面左下角的"运行代码"和"保存代码",可实现相应的功能;
  3. 代码保存成功后你可得到一个短网址,如:http://codecan.duapp.com/code/5748yv,通过该网址可预览HTML代码运行结果;
  4. 如果你想修改已保存的代码,请在本站提供的代码短网址后面添加 /edit 即可,如:http://codecan.duapp.com/code/5748yv/edit
  5. 本程序不支持频繁的保存代码,也不支持保存过长或过短的代码;

-- 完 --

本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
原文出处:露兜博客 https://www.ludou.org/web-code-editor.html
露兜
kaapass@outlook.com  QQ 825533758

业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

21 条留言

点此留言
  1. 酷剑

    沙发,哈哈已经体验,效果不错。但是不知道是否这样对于顶级域名的权重有影响呢?因为用这个顶级域名挂了这个编辑器在上面。

    • Ludou

      @酷剑 在通常情况下,顶级域名和子域名www,搜索引擎是分开对待的,也就是说它们是两个不同的网站,但是大多数Web服务器都会将顶级域名自动跳转到www,或者将www自动跳转到顶级域名,所以很多人会误以为这是同一个东西。

      我的博客使用的是www.ludou.org这个子域名,在此之前顶级域名是默认跳转到www的,而且搜索引擎收录的都是www,所以顶级域名指到编辑器对www域名不会有影响。

      • 酷剑

        @Ludou 功能挺好的,呵呵,ludou很厉害哦。

      • countmeon

        @Ludou 这个东西不错,不过这个会不会被一些恶意代码保存,这样你的网址存在恶意代码会被惩罚是理所当然的。

  2. rainforever

    工具怎么挂靠在顶级域名下面啊。

  3. 好东西分享

    赞一个,不错!

  4. 中文软件资讯站

    牛人啊 在别的地方听过楼主

  5. 布客空间

    牛人一个!支持!要多向你学习!

  6. 小杰博客

    哈哈。。。不错,实验了一下

  7. 老饕

    囧~ 我自动跳转了?

    • Ludou

      @老饕 呵呵,WordPress程序将.htaccess的Rewrite规则覆盖了,现在已经修复。

  8. 途途

    这个好,改天试下~

  9. Arthur

    這個在綫編輯器不好玩,要是有人搗亂呢?
    http://ludou.org/b

    • Ludou

      @Arthur 如果你是程序的作者,你也应该知道要想全部过滤此类恶意代码,几乎是不可能的事情,而且编辑器是支持JavaScript的。唯一能做的就是人工审查。

  10. zhmh

    你好,今天我看你的文章,我觉得可以实现这个一个功能:就是把文件可以在线编辑、预览、保存。这里指的文件是 类似word结构。
    今天弄了一个下午的CKeditor,只是只是能在线编辑,不能实现文件的保存和下载,我希望你可以给我一些帮助。

    • Ludou

      @zhmh 本文介绍的工具,内容保存在数据库中。
      关于CKeditor,它提供了多种语言的程序例子,你可以参考如果从CKeditor获取内容,然后保存到文件,文件下载只是提供个文件链接而已。

  11. lioff

    CODE保存时间有限制吗?

  12. HIHX

    无意中进来的,WP的插件有RUNCODE不过不太好用,每次要在前面加上<code> 等代码才能实现。
    你这样也不好,不能在文章中调用显示,只能说是一个独立的工具。
    我后来找了个,效果还行,我BOLG上有演示,哈哈。看下效果。http://www.w2z.net/index.php/archives/49

发表留言