Add Open in 3rd party code editor option

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",

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>

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>`