JShare 2.0 使用文档

修订时间：2016-08-28

JShare 是一个在线代码测试、托管、分享的工具，方便与别人一起调试、分享代码，具有代码高亮、一键代码格式化、贴心的快捷键等功能。

在未登录之前，您是无法进行代码保存、管理等操作的，您可以通过登录链接或者任意页面的右上角的 “登录 / 注册” 按钮来进行登录。

如果您还没有我们的账户，请通过注册链接注册用户（一处注册，简数科技旗下网站通用）。

如果您忘记了您的密码，可以通过访问我们的网站并点击 找回密码 按钮进行找回密码操作。

二、编辑器功能

您可以通过页面上方的导航 “创建新代码” 、直接访问创建代码页面或访问任意已经存在代码编辑页面进入编辑器页面。

编辑器共有三个大的功能分组：代码编辑区、代码信息及设置区、导航区

编辑器总览图1 - 编辑器功能分区总览

代码编辑区：包含 JavaScript、HTML、CSS 及运行结果窗口，用户编辑代码及查看运行效果，这些窗口是可以自由拖动大小及排列组合显示的；
代码信息及设置区：包括设置代码的基本信息、所属分组、添加外部资源等设置功能，另外还有快捷键说明及相关信息；
导航区：常用功能导航栏。最右侧是用户登录及用户管理中心，左侧的导航包含代码的一些常用操作，包括运行代码、保持代码、使用文档。对于已经保存的代码，还有创建分支、分享功能，如下图所示

图2 - 创建分支及分享功能

下面用具体的实例来说明编辑器是怎么使用的

三、创建并保存代码

3.1、编辑相关的代码

在不同的编辑器窗口里编写需要的代码，实例如下：

图2 - 创建代码

3.2、选择或添加需要的外部资源（可选）

由于我创建的代码依赖外部资源（vuejs），所以我需要添加外部资源。

图3 - 选择外部资源操作步骤

操作步骤：点击“外部资源” => 点击“添加常用资源” => 选择需要的资源 => 确定

图4 - 选择外部资源后可以看文件列表

3.3、运行

选择外部资源后，就可以运行查看效果了。

图5 - 运行及运行结果

3.4、保存

代码运行正常后，我们可以将我们的代码保存到系统中。保存代码操作也很简单，请确保你已经完成了一下操作

设置代码名字
选择代码保存的分组（如果您还没有分组，请创建一个）

图6 - 保存代码

如果您还没有创建分组，那么系统会提示您先创建分组再进行操作。

点击 “创建分组” => 填写必须的资料 => “确定”

创建分组操作图7 - 保存代码

注意事项：

分组名的最大长度是 20 个字符，可以重复；
个性域名为 5 ~ 20 个字符，可以包含字母、数字、特殊字符 “.”、“-”、“_”，不能一特殊字符为开头；
个性域名全局唯一，不可重复；
普通用户最多可以创建 10 个分组。

至此，我们已经完成了代码创建、保存操作。操作完毕后，系统会生成代码唯一的编码及链接。

四、快捷键

为了方便用户操作，我们提供了一些常用的操作的快捷键功能。快捷键分为全局快捷和编辑器快捷键，全局快捷键是在全局下有效（非编辑状态），编辑器快捷键针对编辑器有效。

4.1、全局快捷键

Ctrl + Enter：运行当前代码
Ctrl + ←/→ ：折叠左侧菜单栏

4.2、编辑器快捷键

Ctrl + Enter：运行当前代码
Tab：快捷生成 HTML、CSS 代码，详见 Emmet
Ctrl + L：选择当前行
F11：最大化当前编辑器窗口

除了上述常用快捷键以外，我们的编辑器其他快捷键同 Sublime 编辑器风格，支持的快捷键列表见 Codemirror Sublime bindings ；另外针对 HTML 及 CSS 代码，我们还支持 Emmet 特性快捷生成代码

4.3、Emmet

Emmet 是一个文本编辑器的插件，它可以帮助您快速编写HTML和CSS代码，从而加速Web前端开发。

关于 Emmet 的具体使用详见介绍及官方文档

五、外部资源

外部资源指的是外部的 JavaScript、Css 库文件，在 JShare 中，有三种方式添加外部资源。

5.1、直接选择我们提供的常见的资源

对于 Highcharts 及其他常用的库，我们直接提供勾选的方式添加相关的库文件，这些文件都可以在我们的 CDN 服务上找到。

图8 - 所有常用外部资源

如果您还有其他资源的需求，可以告诉我们，我们会不定期添加。

5.2、输入链接添加

图9 - 通过链接添加资源

5.3、写在 HTML 代码里

图10 - 通过 HTML 标签添加外部资源

通过图8 和图9 的方式添加的资源可以很方便的进行管理，包括调整顺序、删除操作等，如下图所示

图11 - 资源管理

六、代码管理

代码管理包括代码创建、更新、创建分支、分享、锁定、删除等操作，这些操作有的只能在前台操作，有的则需要到后台管理页面操作。

6.1、前台管理（编辑器页面）

前台管理包括创建代码、更新、创建分支、分享操作，创建代码上面已经介绍过了，这里重点说明一下创建分支和分享功能。

6.1.1 创建分支

创建分支操作是将当前的代码保存成新的一份代码，作为当前代码的一个分支，方便记录代码的更新历史。

注意事项：

创建分支只能对自己拥有权限的代码进行操作，否则就是普通的更新操作；
对于锁定的代码，更新操作等同创建分支操作。

6.1.2 分享功能

分享功能可以方便的将托管在 JShare 的代码通过链接将编辑页面、结果页面分享给朋友、社区，或者将结果嵌入到您的页面中。下面是嵌入页面的一个例子

对应的代码是：

 <iframe width="100%" height="420" src="https://jshare.com.cn/highcharts/rKJPUg/share/" 
   allowfullscreen="allowfullscreen" frameborder="0"></iframe>

可以通过我们的分享按钮来获得

图12 - 分享功能

我们可以通过在链接中指定需要显示的代码窗口，规则是：

https://jshare.com.cn/{{group}}/{{code}}/[{{version}}]share/[{{tables}}]

{{tables}} 为可选参数，可以是由 “result”、“js”、“html”、“css” 中的一个或多个自由组和成字符串，多个之间用逗号分隔，默认是：“result”。实例：

https://jshare.com.cn/demos/hhhhx1/share/
https://jshare.com.cn/demos/hhhhx1/share/result,js,html,css
https://jshare.com.cn/demos/hhhhx1/share/js,html,css
https://jshare.com.cn/demos/hhhhx1/share/html,css,js,result
......

通过 https://jshare.com.cn/{{group}}/{{code}}/[{{version}}]/share/pure 可以创建纯净的分享结果，即最终的运行结果不包含 ifram 的形式，该功能主要是针对代码调试时防止 iframe 对兼容性等的影响

实例：https://jshare.com.cn/highcharts/rKJPUg/share/pure

6.2、后台管理（管理页面）

后台管理可以查看您所有的创建的、管理的、参与的代码，同时可以对创建的或管理的代码进行锁定、修改基本信息、删除操作。

图13 - 后台代码管理功能预览

6.2.1 锁定功能

代码被锁定后将无法在前台进行更新操作，更新操作将被执行创建分支操作。

七、分组管理

分组是用来存放不同的代码的，同时分组可以拥有多个成员，可以让朋友来一起管理、贡献代码。

7.1、分组管理

分组管理包括创建、修改、删除、默认分组等对分组进行基本的操作。

7.1.1 创建分组

创建分组可以在编辑器左侧的“创建分组”按钮来操作，也可以在后台进行添加创建分组操作。

7.1.2 默认分组

默认是默认的代码保存分组，每个用户只能设置一个默认分组。

7.2、组员管理

组员指的是添加朋友来一起管理或贡献代码，目前有两个可以添加的角色：管理员和组员。管理员可以协助管理分组，成员可以贡献代码。

图14 - 分组组员管理

八、代码模板

为了方便用户更快捷的创建通用代码，我们提供了模板功能，将某一类代码的通用代码、资源提取出来，建立模板，方便后续的代码创建。

8.1 模板维护（创建、更新、删除等）

模板的创建可以通过 https://jshare.com.cn/template/new 页面来创建，支持添加 HTML，JavaScript、CSS代码，支持添加外部资源，同时支持将当前编辑器布局保存下来。另外通过后台你可以查看、维护你创建的模板

8.2 模板使用

模板可以在创建代码时使用，使用方式目前有两种：

1）、通过点击`设置` 》`模板` 里对应的模板即可

图15 - 模板使用方法1

2）、通过连接 `https://jshare.com.cn/new/{template-name}`

其中template-name 为模板名字，例如 highcharts，对应的链接是：https://jshare.com.cn/new/highcharts

九、POST API

Post API 是指通过 POST 方法提交 HTML、CSS、JS 等代码或参数来动态的创建代码，可以很方便的将现有代码进行动态预览，Post API 的使用方法如下：

1、引入必须的文件

<script src="https://jscdn.com.cn/hcode/jshare.js"></script>

2、调用goJShare 方法，例如

goJShare({
  js: 'console.log("I am from post api")'
})

3、参数说明

goJShare 函数接受一个对象作为参考，改对象里可以包含的数据有：

js：JS 代码
html：HTML 代码
css： CSS 代码
libs：库文件，多个用逗号分开
template：模板名称
layout：布局id，0 ~ 8，分别对应编辑器布局中的下标
name：代码的名字
description：代码的描述信息

4、示例说明

1）指定 JS、HTML、CSS

goJShare({
    js: 'var container = document.getElementById("container"); container.innerHTML = "<p>I am from Post API !</p>"',
    html: '<div id="container"></div>',
    css: '#container {width: 500px;height: 400px;border: 1px solid #ccc;}'
})

2）指定模板

goJShare({
    js: `var app = new Vue({
        el: '#app',
        data: {
                products: [] // 产品列表
        },
        computed: {
                // 计算产品的总数
                totalProducts() {
                        return this.products.reduce((sum, product) => {
                                return sum + product.quantity;
                        }, 0);
                }   
        },
        created () {
                // 请求数据
                fetch('https://api.myjson.com/bins/74l63')
                        .then(response => response.json())
                        .then(json => {
                        this.products = json.products;
                });
        }
    });`,
    html: `<div id="app">
        <ul>
                <li v-for="p in products">
                        <input type="number" v-model.number="p.quantity"> {{p.name}}
                        <span v-if="p.quantity === 0"> - 无库存</span>
                        <button @click="p.quantity++">Add</button>
                </li>
        </ul>
        <p>Total： {{totalProducts}}</p>
    </div>`,
    css: `li {
        list-style: none;
        line-height: 2;
    }`,
    template: 'vue'
})

JShare 2.0 使用文档

一、用户注册、登录

二、编辑器功能

三、创建并保存代码

3.1、编辑相关的代码

3.2、选择或添加需要的外部资源（可选）

3.3、运行

3.4、保存

注意事项：

四、快捷键

4.1、全局快捷键

4.2、编辑器快捷键

4.3、Emmet

五、外部资源

5.1、直接选择我们提供的常见的资源

5.2、输入链接添加

5.3、写在 HTML 代码里

六、代码管理

6.1、前台管理（编辑器页面）

6.1.1 创建分支

6.1.2 分享功能

6.2、后台管理（管理页面）

6.2.1 锁定功能

七、分组管理

7.1、分组管理

7.1.1 创建分组

7.1.2 默认分组

7.2、组员管理

八、代码模板

8.1 模板维护（创建、更新、删除等）

8.2 模板使用

1）、通过点击设置 》模板 里对应的模板即可

2）、通过连接 https://jshare.com.cn/new/{template-name}

九、POST API

模板（查看所有模板）

1）、通过点击`设置` 》`模板` 里对应的模板即可

2）、通过连接 `https://jshare.com.cn/new/{template-name}`