diff --git a/package.json b/package.json
index 0b15f2e3..4b87de3a 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "globby": "^10.0.1",
     "gray-matter": "^4.0.2",
     "html-loader": "^1.3.2",
+    "lz-string": "^1.4.4",
     "marked": "^0.3.12",
     "mini-css-extract-plugin": "^1.3.3",
     "node-static": "^0.7.11",
diff --git a/src/asset/icon/codePen.svg b/src/asset/icon/codePen.svg
new file mode 100644
index 00000000..4ba7f4de
--- /dev/null
+++ b/src/asset/icon/codePen.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1628253218208" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4588" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M968.8 367.2l-0.342857-1.714286c-0.228571-1.142857-0.342857-2.171429-0.685714-3.314285-0.228571-0.685714-0.457143-1.257143-0.571429-1.942858-0.342857-0.914286-0.571429-1.942857-1.028571-2.857142-0.228571-0.685714-0.571429-1.257143-0.914286-1.942858-0.457143-0.914286-0.914286-1.714286-1.371429-2.628571-0.342857-0.571429-0.685714-1.257143-1.142857-1.828571-0.914286-1.371429-1.942857-2.742857-2.971428-4.114286-0.571429-0.685714-1.257143-1.485714-1.942858-2.171429-0.457143-0.571429-1.028571-1.028571-1.6-1.485714-0.685714-0.685714-1.485714-1.257143-2.171428-1.828571-0.571429-0.457143-1.142857-0.914286-1.828572-1.371429-0.228571-0.114286-0.457143-0.342857-0.685714-0.457143L533.828571 61.485714a39.2 39.2 0 0 0-43.542857 0L72.342857 339.771429c-0.228571 0.114286-0.457143 0.342857-0.685714 0.457142-0.571429 0.457143-1.142857 0.914286-1.828572 1.371429-0.8 0.571429-1.485714 1.257143-2.171428 1.828571-0.571429 0.457143-1.028571 1.028571-1.6 1.485715-0.685714 0.685714-1.371429 1.371429-1.942857 2.171428-1.142857 1.257143-2.057143 2.628571-2.971429 4.114286-0.342857 0.571429-0.8 1.142857-1.142857 1.828571-0.457143 0.8-0.914286 1.714286-1.371429 2.628572-0.342857 0.571429-0.571429 1.257143-0.914285 1.942857-0.342857 0.914286-0.685714 1.942857-1.028572 2.857143-0.228571 0.685714-0.457143 1.257143-0.571428 1.942857-0.228571 1.028571-0.457143 2.171429-0.685715 3.314286l-0.342857 1.714285c-0.228571 1.714286-0.342857 3.428571-0.342857 5.142858v278.285714c0 1.714286 0.114286 3.428571 0.342857 5.142857l0.342857 1.714286 0.685715 3.314285c0.228571 0.685714 0.342857 1.257143 0.571428 1.942858 0.342857 1.028571 0.685714 1.942857 1.028572 2.857142 0.228571 0.685714 0.571429 1.257143 0.914285 1.942858 0.457143 0.914286 0.8 1.714286 1.371429 2.628571 0.342857 0.571429 0.685714 1.257143 1.142857 1.828571 0.571429 0.8 1.028571 1.6 1.714286 2.4l1.371428 1.714286c0.571429 0.685714 1.257143 1.485714 1.942858 2.171429 0.457143 0.571429 1.028571 1.028571 1.6 1.485714 0.685714 0.685714 1.485714 1.257143 2.171428 1.828571 0.571429 0.457143 1.142857 0.914286 1.828572 1.371429 0.228571 0.114286 0.457143 0.342857 0.685714 0.457143L490.285714 961.942857c6.4 4.342857 14.057143 6.628571 21.828572 6.628572 7.542857 0 15.2-2.171429 21.828571-6.628572l417.828572-278.285714c0.228571-0.114286 0.457143-0.342857 0.685714-0.457143 0.571429-0.457143 1.142857-0.914286 1.828571-1.371429 0.8-0.571429 1.485714-1.257143 2.171429-1.828571 0.571429-0.457143 1.028571-1.028571 1.6-1.485714 0.685714-0.685714 1.371429-1.371429 1.942857-2.171429l1.371429-1.714286 1.714285-2.4c0.342857-0.571429 0.8-1.142857 1.142857-1.828571 0.457143-0.914286 0.914286-1.714286 1.371429-2.628571 0.342857-0.571429 0.571429-1.257143 0.914286-1.942858 0.342857-0.914286 0.685714-1.942857 1.028571-2.857142 0.228571-0.571429 0.457143-1.257143 0.571429-1.942858 0.342857-1.028571 0.457143-2.171429 0.685714-3.314285l0.342857-1.714286c0.228571-1.714286 0.342857-3.428571 0.342857-5.142857V372.342857c-0.342857-1.714286-0.457143-3.428571-0.685714-5.142857zM551.314286 167.428571l307.885714 205.028572-137.485714 91.885714-170.285715-113.828571V167.428571z m-78.628572 0v183.085715l-170.285714 113.828571-137.485714-91.885714 307.771428-205.028572zM133.371429 445.828571l98.285714 65.714286-98.285714 65.714286v-131.428572z m339.314285 409.714286L164.914286 650.514286l137.485714-91.885715 170.285714 113.828572v183.085714zM512 604.342857l-138.971429-92.8L512 418.628571l138.971429 92.8L512 604.342857z m39.314286 251.2V672.457143l170.285714-113.828572 137.485714 91.885715-307.771428 205.028571zM890.628571 577.142857l-98.285714-65.714286 98.285714-65.714285v131.428571z" p-id="4589" fill="#8a8a8a"></path></svg>
\ No newline at end of file
diff --git a/src/asset/icon/codeSandbox.svg b/src/asset/icon/codeSandbox.svg
new file mode 100644
index 00000000..2dcb7315
--- /dev/null
+++ b/src/asset/icon/codeSandbox.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1628170897433" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4582" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M737.828571 166.857143l0.457143-0.228572h0.228572L512 36.571429 285.6 166.628571h-0.228571l0.8 0.342858L100 274.285714v475.428572L512 987.428571l412-237.714285V274.285714l-186.171429-107.428571zM478.514286 890.971429L314.971429 796.571429V637.028571L166.857143 552.914286V353.028571l311.657143 179.771429v358.171429zM199.085714 294.285714l153.942857-88.914285 158.742858 91.085714 158.971428-91.314286 154.514286 89.142857-313.028572 180.571429-313.142857-180.571429zM857.142857 553.485714l-147.2 83.542857v158.971429l-164.457143 94.857143V533.028571L857.142857 353.257143v200.228571z" p-id="4583" fill="#8a8a8a"></path></svg>
\ No newline at end of file
diff --git a/src/asset/icon/jsFiddle.svg b/src/asset/icon/jsFiddle.svg
new file mode 100644
index 00000000..8bdcae93
--- /dev/null
+++ b/src/asset/icon/jsFiddle.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1632473062804" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3440" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.015625" height="16"><defs><style type="text/css"></style></defs><path d="M915.2 478.4c-8-4.8-9.6-11.2-11.2-19.2-4.8-30.4-6.4-60.8-16-89.6-65.6-180.8-280-259.2-448-166.4-49.6 27.2-88 65.6-118.4 115.2-6.4-3.2-9.6-4.8-14.4-6.4-54.4-22.4-107.2-17.6-155.2 16-46.4 33.6-65.6 80-59.2 139.2 0 4.8-3.2 14.4-8 17.6C12.8 539.2-16 627.2 9.6 712c25.6 83.2 104 144 192 147.2 54.4 1.6 110.4 1.6 164.8 1.6 152 0 304 1.6 457.6-1.6 96-1.6 174.4-67.2 196.8-158.4 19.2-88-22.4-176-105.6-222.4z m38.4 284.8c-33.6 40-76.8 64-129.6 64-102.4 1.6-206.4 0-308.8 0 0 1.6-296 0-297.6 0-80 0-139.2-35.2-172.8-108.8-33.6-75.2-8-164.8 62.4-211.2 16-11.2 22.4-20.8 17.6-41.6-9.6-48 8-86.4 48-113.6 41.6-28.8 86.4-28.8 131.2-4.8 19.2 9.6 27.2 20.8 40-4.8 25.6-48 62.4-84.8 110.4-110.4 176-99.2 414.4 14.4 417.6 240 0 14.4 4.8 22.4 17.6 28.8 105.6 48 136 174.4 64 262.4z m-158.4-145.6c-11.2 56-62.4 99.2-121.6 99.2-30.4 0-57.6-11.2-80-32-49.6-46.4-129.6-136-174.4-169.6-36.8-27.2-76.8-22.4-108.8 6.4-91.2 80 28.8 220.8 121.6 139.2 8-6.4 14.4-17.6 22.4-24 14.4-9.6 38.4-1.6 24 19.2-32 48-89.6 68.8-142.4 52.8-52.8-16-88-65.6-88-128 1.6-40 22.4-78.4 64-100.8 41.6-22.4 84.8-24 121.6 4.8 92.8 70.4 137.6 148.8 195.2 184 44.8 27.2 97.6 12.8 124.8-32 52.8-89.6-62.4-190.4-142.4-115.2-8 6.4-12.8 16-20.8 20.8-19.2 12.8-32-8-24-19.2 36.8-51.2 91.2-73.6 150.4-51.2 57.6 24 89.6 83.2 78.4 145.6z" p-id="3441" fill="#8a8a8a"></path></svg>
\ No newline at end of file
diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue
index bf9507c9..d38ae15d 100644
--- a/src/editor/Editor.vue
+++ b/src/editor/Editor.vue
@@ -1,7 +1,7 @@
 <template>
 <div id="main-container">
     <div id="editor-left-container" :style="{width: leftContainerSize + '%'}" v-if="!shared.isMobile">
-        <el-tabs v-model="currentTab" type="border-card">
+        <el-tabs v-model="currentTab" type="border-card" :before-leave="tabsBeforeLeave" :class="shared.locale == 'zh'? 'tabs-zh': 'tabs-en'">
             <el-tab-pane :label="$t('editor.tabEditor')" name="code-editor">
                 <el-container>
                     <el-header id="editor-control-panel">
@@ -53,7 +53,41 @@
             <el-tab-pane :label="$t('editor.tabOptionPreview')" name="full-option">
                 <div id="option-outline"></div>
             </el-tab-pane>
+            <el-tab-pane name="more-editor">
+                <span slot="label" >
+                    <form action="https://codesandbox.io/api/v1/sandboxes/define" method="POST" target="_blank" class="editor-form">
+                        <input type="hidden" name="parameters" :value="this.compress(JSON.stringify(this.codeSandboxConfig))" />
+                        <button  class="editor-button" type="submit"  @click="getCodeSandboxConfig">
+                            <el-tooltip :content="shared.locale == 'zh'? '在codeSandbox中打开': 'open in codeSandbox'" placement="bottom">
+                                <span v-html="require('../asset/icon/codeSandbox.svg')"></span>
+                            </el-tooltip >
+                        </button>
+                    </form>
+                    <form action="https://codepen.io/pen/define" method="POST" target="_blank" class="editor-form">
+                        <input type="hidden" name="data" :value="JSON.stringify(this.codePenConfig)" />
+                        <button  class="editor-button" type="submit"  @click="getCodePenConfig">
+                            <el-tooltip :content="shared.locale == 'zh'? '在codePen中打开': 'open in codePen'" placement="bottom">
+                                <span  v-html="require('../asset/icon/codePen.svg')"></span>
+                            </el-tooltip >
+                        </button>
+                    </form>
+                    <form action="http://jsfiddle.net/api/post/mootools/1.3/dependencies/more/" method="POST" target="check" class="editor-form">
+                        <input type="hidden" name="html" :value="this.jsFiddleConfig.html" />
+                        <input type="hidden" name="js" :value="this.jsFiddleConfig.js" />
+                        <input type="hidden" name="resources" :value="this.jsFiddleConfig.resources" />
+                        <input type="hidden" name="title" :value="this.title" />
+                        <button  class="editor-button" type="submit"  @click="getJSFiddleConfig">
+                            <el-tooltip :content="shared.locale == 'zh'? '在JSFiddle中打开': 'open in JSFiddle'" placement="bottom">
+                                <span v-html="require('../asset/icon/jsFiddle.svg')"></span>
+                            </el-tooltip >
+                        </button>
+                    </form>
+                    
+                </span>
+            </el-tab-pane>
         </el-tabs>
+        
+
     </div>
     <div class="handler" id="h-handler" @mousedown="onSplitterDragStart" :style="{left: leftContainerSize + '%'}" v-if="!shared.isMobile"></div>
     <Preview :inEditor="true" class="right-container" ref="preview" :style="{
@@ -64,7 +98,7 @@
 </template>
 
 <script>
-
+import LZString from 'lz-string';
 import CodeAce from './CodeAce.vue';
 import CodeMonaco from './CodeMonaco.vue';
 import FullCodePreview from './FullCodePreview.vue';
@@ -73,7 +107,7 @@ import {URL_PARAMS} from '../common/config';
 import {store, loadExampleCode, parseSourceCode} from '../common/store';
 import {collectDeps, buildExampleCode} from '../../common/buildCode';
 import { mount } from "@lang/object-visualizer";
-
+import { getCodeSandboxHTML,codeSandboxPackage, staticConfig, getJSCode, codePenJSExternal, HTML, fiddleJSExternal } from './onlineEditor.js'
 import './object-visualizer.css';
 
 export default {
@@ -100,7 +134,17 @@ export default {
                 mimimal: false,
                 esm: true,
                 node: false // If is in node
-            }
+            },
+
+            codeSandboxConfig: {},
+            codePenConfig: {},
+            jsFiddleConfig: {
+                html: '',
+                js: '',
+                resources: ''
+            },
+
+            title: '',
         };
     },
 
@@ -123,6 +167,14 @@ export default {
     },
 
     mounted() {
+        //通过解析当前路由获取示例的标题
+        const url = window.location.search;
+        const params = {};
+        url.substring(1).split('&').forEach(el => {
+            const [ key, value ] = el.split('=');
+            params[key] = value; 
+        })
+        this.title = params.c;
 
         if (store.isMobile) {
             this.leftContainerSize = 0;
@@ -152,6 +204,55 @@ export default {
     },
 
     methods: {
+        compress(string) {
+            return LZString.compressToBase64(string)
+                .replace(/\+/g, '-') // Convert '+' to '-'
+                .replace(/\//g, '_') // Convert '/' to '_'
+                .replace(/=+$/, ''); // Remove ending '='
+        },
+        tabsBeforeLeave(activeName, oldActiveName) {
+            //阻止more-editor标签的返回
+            if(activeName == 'more-editor'){
+                return false;
+            }
+        },
+        
+        getCodeSandboxConfig() {
+            codeSandboxPackage.name = this.title;
+            let config={
+                files: {
+                    'package.json': {
+                        content: codeSandboxPackage
+                    },
+                    'index.html':{
+                        content: getCodeSandboxHTML()
+                    },
+                    'sandbox.config.json':{
+                        content: staticConfig
+                    }
+                }
+            }
+            this.codeSandboxConfig = config;
+        },
+        getCodePenConfig() {
+            this.codePenConfig={
+                title: this.title,
+                html: HTML,
+                js: getJSCode(),
+                editors: "001",
+                js_external: codePenJSExternal
+            }
+        },
+
+        getJSFiddleConfig(){
+            this.jsFiddleConfig = {
+                html:HTML,
+                js: getJSCode(),
+                resources: fiddleJSExternal
+            }
+        },
+
+
         onSplitterDragStart() {
             this.mousedown = true;
         },
@@ -450,5 +551,42 @@ $handler-width: 5px;
     background: $clr-bg;
 }
 
+.tabs-en{
+    #tab-more-editor{
+        text-align: right;
+        width: calc(100% - 180px);
+        cursor: default;
+    }
+    .el-tabs__nav {
+        width: calc(100% - 180px);
+    }
+
+}
+.tabs-zh{
+    #tab-more-editor{
+        text-align: right;
+        width: calc(100% - 130px);
+        cursor: default;
+    }
+    .el-tabs__nav {
+        width: calc(100% - 130px);
+    }
+}
+.editor-form{
+    width: 20px;
+    display: inline-block;
+    margin: 0 3px;
+
+    .editor-button{
+        background: none;
+        outline: none;
+        border: none;
+    }
+}
+
+
+
+
+
 
 </style>
\ No newline at end of file
diff --git a/src/editor/onlineEditor.js b/src/editor/onlineEditor.js
new file mode 100644
index 00000000..979b2da2
--- /dev/null
+++ b/src/editor/onlineEditor.js
@@ -0,0 +1,92 @@
+
+import {store} from '../common/store';
+import {URL_PARAMS, SCRIPT_URLS} from '../common/config';
+
+const getRootPath = () => {
+  const hasRootPath = store.sourceCode.indexOf('ROOT_PATH') >= 0;
+  return hasRootPath ? `var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples'`: '';
+}
+
+export  const getCodeSandboxHTML = ()=>{
+
+  const rootPathCode = getRootPath()
+  return (`<!DOCTYPE>
+  <html>
+    <head>
+      <meta charset="utf-8" />
+    </head>
+    <body>
+      <div id="main" style="width: 600px; height: 400px;"></div>
+      <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
+      <script type="text/javascript" src="${SCRIPT_URLS.echartsMinJS}"></script>
+      <script type="text/javascript" src="${SCRIPT_URLS.echartsDir}/dist/extension/dataTool.min.js"></script>
+      <script type="text/javascript" src="${SCRIPT_URLS.echartsGLMinJS}"></script>
+      <script type="text/javascript" src="${SCRIPT_URLS.echartsStatMinJS}"></script>
+      <script type="text/javascript">
+
+var chartDom = document.getElementById('main');
+var myChart = echarts.init(chartDom);
+var option;
+
+${rootPathCode}
+${store.sourceCode}
+
+option && myChart.setOption(option);
+
+      </script>
+    </body>
+  </html>`)
+}
+
+export const codeSandboxPackage = {
+    "name": "static",
+    "version": "1.0.0",
+    "description": "This is a static template with no bundling",
+    "main": "index.html",
+    "scripts": {
+        "start": "serve",
+        "build": "echo This is a static template, there is no bundler or bundling involved!"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/codesandbox-app/static-template.git"
+    },
+    "keywords": ["static", "template", "codesandbox"],
+    "author": "Ives van Hoorne",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/codesandbox-app/static-template/issues"
+    },
+    "homepage": "https://github.com/codesandbox-app/static-template#readme",
+    "devDependencies": {
+        "serve": "^11.2.0"
+    }
+}
+
+
+
+export const staticConfig = `{
+  "template": "static"
+}`
+
+export const getJSCode = () => {
+
+  const rootPathCode = getRootPath()
+  return (`
+  var chartDom = document.getElementById('main');
+  var myChart = echarts.init(chartDom);
+  var option;
+
+  ${rootPathCode}
+  ${store.sourceCode}
+
+  option && myChart.setOption(option);` )
+}
+
+const js_external = ['https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js', SCRIPT_URLS.echartsMinJS, `${SCRIPT_URLS.echartsDir}/dist/extension/dataTool.min.js`, SCRIPT_URLS.echartsGLMinJS,  SCRIPT_URLS.echartsStatMinJS]
+export const codePenJSExternal = js_external.join(';')
+
+export const fiddleJSExternal =js_external.join(',')
+
+
+export const HTML = `<div id="main" style="width: 600px; height: 400px;"></div>`
\ No newline at end of file