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

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

  •  
  •   quietjosen · 264 天前 · 1923 次点击
    这是一个创建于 264 天前的主题,其中的信息可能已经有所发展或是发生改变。

    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
        1
    Bijiabo   264 天前 via iPad
    点个赞,最近也有类似需求
        2
    ian511   264 天前 via iPhone
    恭喜又出佳作!资持一下!!
        3
    rocyhua   264 天前
        4
    quietjosen   263 天前 via iPhone
    @Bijiabo 现有的在线编辑器,你觉得哪个最好用?
        5
    ccccccc   263 天前
    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>
    )
    },
    })
    ```
        6
    quietjosen   263 天前
    @ccccccc 可能你没仔细看,iCode 提供的示例截图不就是 Vue 吗?
        7
    ccccccc   263 天前
    @quietjosen 我说的是 vue 的 jsx,你试试我贴的代码
        8
    Bijiabo   263 天前
    @quietjosen 目前需求比较简单,主要是希望能在线编辑一点简单 JS 代码和 JSON 配置文件,考虑用 Ace 解决,其他还没有看到更加合适的。
        9
    airyland   263 天前
    这里有个开源的 https://codepan.net/
        10
    quietjosen   263 天前
    @ccccccc 还真是哎
        11
    quietjosen   263 天前
    @Bijiabo iCode 内置的编辑器是 CodeMirror
        12
    quietjosen   263 天前
    @airyland 可以可以,只是布局不能改有点遗憾。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   866 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 23ms · UTC 20:29 · PVG 04:29 · LAX 12:29 · JFK 15:29
    ♥ Do have faith in what you're doing.