V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
quietjosen
V2EX  ›  分享创造

iCode: 开源的在线 html/css/js 编辑器

  •  
  •   quietjosen ·
    atjason · 2019-02-25 00:53:54 +08:00 · 3282 次点击
    这是一个创建于 1858 天前的主题,其中的信息可能已经有所发展或是发生改变。

    iCode,一款开源的在线 html/css/js 编辑器。

    为什么要创建 iCode ?

    是的,市面上已经有很多成熟的产品,比如 jsfiddle、codepen 等,为什么要再来一个呢?很简单:练手 😂

    一方面,iCode 比较适合练手 css/Vue 等技术,另一方面自己平时也可能会用到 iCode 来测试代码。

    iCode 有什么特点?

    即使是练手项目,iCode 还是有些自己的特点的:

    • html/css/js/preview 四分布局,非常类似于我自己平时用的 iTerm2
    • 交互上,也类似于 iTerm2:高亮当前 Panel,可拖拽调整 Panel 大小

    • 快捷键支持(我是效率控):
      • ⌘1/2/3/4 显示隐藏 html/js/css/preview 区域
      • ⌘Enter 手动运行代码
    • 基础的编辑器支持,如自动缩进、语法高亮、语法检查等
    • 代码保存在浏览器本地存储中

    默认编辑后自动运行代码,如果担心有太多次不必要的执行,可以点页面右下角设置按钮,取消该选项。

    iCode 还差什么?

    距离一款成熟的在线编辑器,iCode 还差很多,比如:

    • 浏览器适配,手机适配
    • 多项目支持;目前 iCode 仅支持单项目代码
    • 云端保存代码,跨浏览器运行
    • 代码可嵌入网站
    • 上传资源文件
    • 更多界面布局、主题

    源码

    npm run serve,你懂的。

    欢迎交流~

    12 条回复    2019-02-25 15:33:56 +08:00
    Bijiabo
        1
    Bijiabo  
       2019-02-25 01:00:37 +08:00 via iPad
    点个赞,最近也有类似需求
    ian511
        2
    ian511  
       2019-02-25 01:10:51 +08:00 via iPhone
    恭喜又出佳作!资持一下!!
    rocyhua
        3
    rocyhua  
       2019-02-25 01:21:47 +08:00
    quietjosen
        4
    quietjosen  
    OP
       2019-02-25 08:09:22 +08:00 via iPhone
    @Bijiabo 现有的在线编辑器,你觉得哪个最好用?
    ccccccc
        5
    ccccccc  
       2019-02-25 10:43:39 +08:00
    https://chrome.google.com/webstore/detail/yukar/ilbmpnheigbnilnbknenakbkkdmaemlp

    支持更多情况,例如 vue jsx

    ```html
    <script src="//unpkg.com/vue"></script>

    <div id="root"></div>
    ```


    ```js
    new Vue({
    el: '#root',
    data: {
    msg: 'Vue JSX',
    },
    methods: {
    hello () {
    alert('Vue JSX')
    },
    },
    render(h) {
    return (
    <p on-click={ this.hello }>
    { this.msg }
    </p>
    )
    },
    })
    ```
    quietjosen
        6
    quietjosen  
    OP
       2019-02-25 12:11:22 +08:00
    @ccccccc 可能你没仔细看,iCode 提供的示例截图不就是 Vue 吗?
    ccccccc
        7
    ccccccc  
       2019-02-25 12:37:54 +08:00
    @quietjosen 我说的是 vue 的 jsx,你试试我贴的代码
    Bijiabo
        8
    Bijiabo  
       2019-02-25 13:37:24 +08:00
    @quietjosen 目前需求比较简单,主要是希望能在线编辑一点简单 JS 代码和 JSON 配置文件,考虑用 Ace 解决,其他还没有看到更加合适的。
    airyland
        9
    airyland  
       2019-02-25 14:55:01 +08:00
    这里有个开源的 https://codepan.net/
    quietjosen
        10
    quietjosen  
    OP
       2019-02-25 15:29:36 +08:00
    @ccccccc 还真是哎
    quietjosen
        11
    quietjosen  
    OP
       2019-02-25 15:30:51 +08:00
    @Bijiabo iCode 内置的编辑器是 CodeMirror
    quietjosen
        12
    quietjosen  
    OP
       2019-02-25 15:33:56 +08:00
    @airyland 可以可以,只是布局不能改有点遗憾。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5453 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 08:02 · PVG 16:02 · LAX 01:02 · JFK 04:02
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.