-
+
@@ -53,16 +53,29 @@
+
+
+
+
+
+
-
+
+
- Hello, {formatName(user)}! -
-); - -ReactDOM.render( - element, - document.getElementById('root') -);` - }, - 'package.json': { - content: { - dependencies: { - react: "latest", - "react-dom": "latest" - } - } - }, - 'index.html':{ - content:'' - } - } - } + codeSandboxConfig: {}, + codePenConfig: {}, }; }, @@ -209,31 +222,40 @@ ReactDOM.render( .replace(/\//g, '_') // Convert '/' to '_' .replace(/=+$/, ''); // Remove ending '=' }, - toCodeSandbox(){ - console.log(this.parameters) - // const package = { - - // } - // fetch('https://codesandbox.io/api/v1/sandboxes/define',{ - // method:'POST', - // body: JSON.stringify({ - // files: { - // 'index.js': { - // content: this.fullCode - // }, - // 'package.json': { - // content: { - - // } - // } - // } - // }) - - // }).then(res=>{ - - // }) - // console.log('content!:', this.fullCode) + tabsBeforeLeave(activeName, oldActiveName) { + //阻止more-editor标签的返回 + if(activeName == 'more-editor'){ + return false; + } }, + + getCodeSandboxConfig() { + this.updateFullCode(); + this.codeSandboxConfig={ + files: { + 'index.js': { + content: this.fullCode + }, + 'package.json': { + content: codeSandboxPackage + }, + 'index.html':{ + content: codeSandboxHTML + } + } + } + }, + getCodePenConfig() { + this.updateFullCode(); + this.codePenConfig={ + title: 'echarts example', + html: codePenHTML, + js: this.fullCode.substring(this.fullCode.indexOf("\n") + 1),//去掉第一行 + editors: "001", + js_external: "https://unpkg.com/react@17.x/umd/react.production.min.js;https://unpkg.com/react-dom@17.x/umd/react-dom.production.min.js;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js" + } + }, + onSplitterDragStart() { this.mousedown = true; }, @@ -531,12 +553,40 @@ $handler-width: 5px; background: $clr-bg; } -.codebox{ - - position: absolute;right:20px;top:5px; - font-size: 14px; +#tab-more-editor{ + text-align: right; + width: calc(100% - 180px); + cursor: default; +} +.el-tabs__nav { + width: calc(100% - 180px); +} +.editor-form{ + width: 20px; + display: inline-block; + + .editor-button{ + background: none; + outline: none; + border: none; + .codesandbox-icon{ + content: ''; + width: 18px; + height: 18px; + display: inline-block; + + svg { + width: 100%!important; + height: auto!important; + } + } + } } + + + + \ No newline at end of file From 4c15538ab22d88772babb790eb9a2393fa6f6541 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=A3=E5=8D=93=E7=90=A6?= <547274419@qq.com> Date: Fri, 24 Sep 2021 18:17:55 +0800 Subject: [PATCH 3/4] add jsfiddle&fix other online editors --- src/asset/icon/jsFiddle.svg | 1 + src/editor/Editor.vue | 103 +++++++++++++++++------------------- src/editor/onlineEditor.js | 90 +++++++++++++++++++++++++++++++ 3 files changed, 141 insertions(+), 53 deletions(-) create mode 100644 src/asset/icon/jsFiddle.svg create mode 100644 src/editor/onlineEditor.js 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 @@ + \ No newline at end of file diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue index 4c6ac65f..ac2a8ebe 100644 --- a/src/editor/Editor.vue +++ b/src/editor/Editor.vue @@ -58,7 +58,7 @@ + + @@ -96,46 +108,7 @@ import {store, loadExampleCode, parseSourceCode} from '../common/store'; import {collectDeps, buildExampleCode} from '../../common/buildCode'; import { mount } from "@lang/object-visualizer"; import './object-visualizer.css'; - -//icon -// const codeSandboxIcon = require('../asset/icon/codeSandbox.svg') - - -//package -const codeSandboxPackage = { - name: "echarts example", - main: "index.js", - dependencies: { - echarts: "5.1.2", - react: "17.0.2", - "react-dom": "17.0.2", - "react-scripts": "4.0.0", - }, - devDependencies: { - typescript: "4.1.3", - }, - scripts: { - start: "react-scripts start", - build: "react-scripts build", - test: "react-scripts test --env=jsdom", - eject: "react-scripts eject", - }, - browserslist: [">0.2%", "not dead", "not ie <= 11", "not op_mini all"], -}; - -const codeSandboxHTML = ` - - - - - - - -` - -const codePenHTML = `` - -// +import { getCodeSandboxHTML,codeSandboxPackage, staticConfig, getJSCode, codePenJSExternal, HTML, fiddleJSExternal } from './onlineEditor.js' export default { components: { @@ -165,6 +138,13 @@ export default { codeSandboxConfig: {}, codePenConfig: {}, + jsFiddleConfig: { + html: '', + js: '', + resources: '' + }, + + title: '', }; }, @@ -187,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; @@ -230,32 +218,41 @@ export default { }, getCodeSandboxConfig() { - this.updateFullCode(); - this.codeSandboxConfig={ + codeSandboxPackage.name = this.title; + let config={ files: { - 'index.js': { - content: this.fullCode - }, 'package.json': { content: codeSandboxPackage }, 'index.html':{ - content: codeSandboxHTML + content: getCodeSandboxHTML() + }, + 'sandbox.config.json':{ + content: staticConfig } } } + this.codeSandboxConfig = config; }, getCodePenConfig() { - this.updateFullCode(); this.codePenConfig={ - title: 'echarts example', - html: codePenHTML, - js: this.fullCode.substring(this.fullCode.indexOf("\n") + 1),//去掉第一行 + title: this.title, + html: HTML, + js: getJSCode(), editors: "001", - js_external: "https://unpkg.com/react@17.x/umd/react.production.min.js;https://unpkg.com/react-dom@17.x/umd/react-dom.production.min.js;https://cdnjs.cloudflare.com/ajax/libs/echarts/5.1.2/echarts.min.js" + js_external: codePenJSExternal } }, + getJSFiddleConfig(){ + this.jsFiddleConfig = { + html:HTML, + js: getJSCode(), + resources: fiddleJSExternal + } + }, + + onSplitterDragStart() { this.mousedown = true; }, diff --git a/src/editor/onlineEditor.js b/src/editor/onlineEditor.js new file mode 100644 index 00000000..068165e1 --- /dev/null +++ b/src/editor/onlineEditor.js @@ -0,0 +1,90 @@ + +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 (` + + + + + + + + + + + + + + `) +} + +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 = `` \ No newline at end of file From a391d2886d04e96f24941709090ce640be13479b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=AD=A3=E5=8D=93=E7=90=A6?= <547274419@qq.com> Date: Mon, 27 Sep 2021 19:16:19 +0800 Subject: [PATCH 4/4] update style --- src/editor/Editor.vue | 47 ++++++++++++++++++++------------------ src/editor/onlineEditor.js | 14 +++++++----- 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/src/editor/Editor.vue b/src/editor/Editor.vue index ac2a8ebe..d38ae15d 100644 --- a/src/editor/Editor.vue +++ b/src/editor/Editor.vue @@ -1,7 +1,7 @@
-
+
@@ -59,7 +59,7 @@
@@ -67,7 +67,7 @@
@@ -78,7 +78,7 @@
@@ -107,8 +107,8 @@ 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 './object-visualizer.css';
import { getCodeSandboxHTML,codeSandboxPackage, staticConfig, getJSCode, codePenJSExternal, HTML, fiddleJSExternal } from './onlineEditor.js'
+import './object-visualizer.css';
export default {
components: {
@@ -551,33 +551,36 @@ $handler-width: 5px;
background: $clr-bg;
}
-#tab-more-editor{
- text-align: right;
- width: calc(100% - 180px);
- cursor: default;
+.tabs-en{
+ #tab-more-editor{
+ text-align: right;
+ width: calc(100% - 180px);
+ cursor: default;
+ }
+ .el-tabs__nav {
+ width: calc(100% - 180px);
+ }
+
}
-.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;
- .codesandbox-icon{
- content: '';
- width: 18px;
- height: 18px;
- display: inline-block;
-
- svg {
- width: 100%!important;
- height: auto!important;
- }
- }
}
}
diff --git a/src/editor/onlineEditor.js b/src/editor/onlineEditor.js
index 068165e1..979b2da2 100644
--- a/src/editor/onlineEditor.js
+++ b/src/editor/onlineEditor.js
@@ -23,14 +23,16 @@ export const getCodeSandboxHTML = ()=>{