Skip to content

Z
zeroing-editor
Commit b41682cd authored by bianlongting's avatar bianlongting 💬
Browse files
Options

添加编辑器

parent 22a21b2b
Show whitespace changes
Inline Side-by-side
Showing with 287 additions and 199 deletions
public/index.html
View file @ b41682cd
...@@ -17,8 +17,9 @@ ...@@ -17,8 +17,9 @@
</noscript> </noscript>
<script> <script>
window.__data = { window.__data = {
token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjA4NSwibmFtZSI6IuWKs-eQquWzsCIsImFjY291bnQiOiJsYW9xaWZlbmciLCJlbWFpbCI6Imxhb3FpZmVuZ0BkdWliYS5jb20uY24iLCJtb2JpbGUiOiIxMzQ1Njc3NDE1MyIsImRpbmdVc2VySWQiOiI1MDY5MDYyOTIxMjkxMDAxIiwibW9kZWxBdXRob3JpemUiOmZhbHNlLCJsb2dpblRpbWVvdXQiOjE0ODA5LCJnbXRDcmVhdGUiOjE1MzQ0MTIwMTUwMDAsImdtdE1vZGlmaWVkIjoxNTczODgyMDk2MDAwLCJzeXN0ZW1JZFNldCI6WzAsMSwzNCwyMjcsMzYsMzcsMjMxLDIwMywxOSwyMSwyNDYsMjMsMjUsMjQ5LDI3LDMwXSwiaWF0IjoxNTc1MzQwMzg2fQ.2JEYMRx6wbJsMIMh3quyM14OsoMz_iJRq4Az_xz-WTc' : '$TOKEN$' %>", token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjU0NywibmFtZSI6IuWNnum-meS6rSIsImFjY291bnQiOiJiaWFubG9uZ3RpbmciLCJlbWFpbCI6ImJpYW5sb25ndGluZ0BkdWliYS5jb20uY24iLCJtb2JpbGUiOiIxNTg2OTE3NDMxMSIsImRpbmdVc2VySWQiOiIwMTE1MTgyMTEyMjE3OTYzNzAiLCJtb2RlbEF1dGhvcml6ZSI6ZmFsc2UsImxvZ2luVGltZW91dCI6NzczNjEsImdtdENyZWF0ZSI6MTU1OTUyNjcxNDAwMCwiZ210TW9kaWZpZWQiOjE1NzM3NDk1OTEwMDAsInN5c3RlbUlkU2V0IjpbMCwxLDM0LDM2LDM3LDIzMSwyMDMsNDQsMTksMjEsMjQ2LDIzLDI0OSwyNSwyNywzMF0sImlhdCI6MTU3Nzk1MjgxNH0.GNeP25ZZK5ca7rvwtj2BaQ3GZatGNSR3CthSN98PSD4' : '$TOKEN$' %>",
apiHost : "<%= process.env.NODE_ENV === 'development' ? 'http://beacon.duibadev.com.cn' : '$API_HOST$' %>" apiHost : "<%= process.env.NODE_ENV === 'development' ? 'http://beacon.duibadev.com.cn' : '$API_HOST$' %>",
types: `$TYPES$`
} }
</script> </script>
<div id="app"></div> <div id="app"></div>
......
src/views/Editor/behavior-editor/MetaEditorDialog.vue
View file @ b41682cd
<template> <template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible" <el-dialog
:title="$t('Meta Editor')"
width="80%"
:visible.sync="visible"
:close-on-click-modal="false" :close-on-click-modal="false"
:close-on-press-escape="false" :close-on-press-escape="false"
:show-close="false" :show-close="false"
...@@ -8,17 +11,27 @@ ...@@ -8,17 +11,27 @@
custom-class="flex-dialog behavior-editor-dialog" custom-class="flex-dialog behavior-editor-dialog"
> >
<div class="meta-editor-wrapper"> <div class="meta-editor-wrapper">
<el-form ref="form" v-if="meta" :model="meta" :rules="rules" :show-message="false" class="info-editor" size="mini" <el-form
label-position="right" label-width="70px" @submit.native.prevent> ref="form"
v-if="meta"
:model="meta"
:rules="rules"
:show-message="false"
class="info-editor"
size="mini"
label-position="right"
label-width="70px"
@submit.native.prevent
>
<template> <template>
<el-form-item prop="id" :label="$t('ID')"> <el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/> <el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable" />
</el-form-item> </el-form-item>
<el-form-item prop="name" :label="$t('Name')"> <el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/> <el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable" />
</el-form-item> </el-form-item>
<el-form-item prop="desc" :label="$t('Desc')"> <el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/> <el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable" />
</el-form-item> </el-form-item>
<!--<el-form-item prop="type" label="Type"> <!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/> <el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
...@@ -29,29 +42,45 @@ ...@@ -29,29 +42,45 @@
<el-form-item :label="$t('Props')"> <el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable"> <el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<template v-if="Object.keys(meta.props).length"> <template v-if="Object.keys(meta.props).length">
<el-tag type="success" size="mini" v-for="(option, key) in meta.props" :key="key">{{key}}</el-tag> <el-tag
type="success"
size="mini"
v-for="(option, key) in meta.props"
:key="key"
>{{key}}</el-tag>
</template> </template>
<template v-else>{{$t('Empty')}}</template> <template v-else>{{$t('Empty')}}</template>
</el-link> </el-link>
</el-form-item> </el-form-item>
<el-form-item :label="$t('Output')"> <el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;"> <div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple <el-select
:placeholder="$t('Output')"/> style="flex: 1;"
v-model="meta.output"
:disabled="!editable"
allow-create
filterable
multiple
:placeholder="$t('Output')"
/>
</div> </div>
</el-form-item> </el-form-item>
</template> </template>
</el-form> </el-form>
<div style="margin-top: 5px;"> <div style="margin-top: 5px;">
<code-sync-indicator/> <code-sync-indicator />
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag> <el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div> </div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')" <!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>--> v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta" <!-- <codemirror
ref="codeEditor"
v-if="meta"
v-model="meta.script" v-model="meta.script"
:options="cmOptions" :options="cmOptions"
@cursorActivity="onCodeChange"/> @cursorActivity="onCodeChange"
/>-->
<monaco-editor ref="codeEditor" v-if="meta" :code="meta.script" :options="monacoConfig" />
</div> </div>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<div class="button-bar"> <div class="button-bar">
...@@ -67,34 +96,31 @@ ...@@ -67,34 +96,31 @@
<el-button size="mini" type="primary" plain @click="save(false)">{{$t('Save')}}</el-button> <el-button size="mini" type="primary" plain @click="save(false)">{{$t('Save')}}</el-button>
</div> </div>
</div> </div>
<props-editor-dialog ref="propsEditorDialog"/> <props-editor-dialog ref="propsEditorDialog" />
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import ElFormItem from "./inputs/form-item"; import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog"; import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror"; import * as monaco from "monaco-editor";
import copy from 'copy-to-clipboard' import MonacoEditor from "../components/MonacoEditor";
import {clonePureObj} from "../../../utils"; import copy from "copy-to-clipboard";
import 'codemirror/mode/javascript/javascript.js' import { clonePureObj } from "../../../utils";
import 'codemirror/lib/codemirror.css' import events from "../../../global-events";
import 'codemirror/theme/monokai.css' import CodeSyncIndicator from "../BottomBar/CodeSyncIndicator";
import 'codemirror/addon/edit/closebrackets.js'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/javascript-lint.js'
import events from '../../../global-events';
import CodeSyncIndicator from "../BottomBar/CodeSyncIndicator";
const exposeVariables = ['args', 'props', 'target', 'global', 'vm', 'engine']; const exposeVariables = ["args", "props", "target", "global", "vm", "engine"];
export default { export default {
name: "MetaEditorDialog", name: "MetaEditorDialog",
components: {CodeSyncIndicator, PropsEditorDialog, ElFormItem, codemirror}, components: {
CodeSyncIndicator,
PropsEditorDialog,
ElFormItem,
monaco,
"monaco-editor": MonacoEditor
},
data() { data() {
return { return {
visible: false, visible: false,
...@@ -103,44 +129,43 @@ ...@@ -103,44 +129,43 @@
exposeVariables, exposeVariables,
rules: { rules: {
id: [ id: [{ required: true, trigger: "blur" }],
{required: true, trigger: 'blur'}, name: [{ required: true, trigger: "blur" }]
],
name: [
{required: true, trigger: 'blur'}
],
}, },
cmOptions: { cmOptions: {
tabSize: 2, tabSize: 2,
styleActiveLine: true, styleActiveLine: true,
theme: 'default', theme: "default",
line: true, line: true,
matchBrackets: true, matchBrackets: true,
autoCloseBrackets: true, autoCloseBrackets: true,
extraKeys: { extraKeys: {
"Alt-Space": "autocomplete", "Alt-Space": "autocomplete"
}, },
lineNumbers: true, lineNumbers: true,
mode: {name: 'javascript', globalVars: true}, mode: { name: "javascript", globalVars: true },
gutters: ["CodeMirror-lint-markers"], gutters: ["CodeMirror-lint-markers"],
lint: true lint: true
},
monacoConfig: {
language: "javascript"
} }
} };
}, },
mounted() { mounted() {
events.$on('edit-save', this.onEditSave); events.$on("edit-save", this.onEditSave);
}, },
destroyed(){ destroyed() {
events.$off('edit-save', this.onEditSave); events.$off("edit-save", this.onEditSave);
}, },
computed: { computed: {
editable() { editable() {
return this.meta;// && this.meta.type !== 'builtin'; return this.meta; // && this.meta.type !== 'builtin';
}, },
props() { props() {
return Object.keys(this.meta.props).join(',') return Object.keys(this.meta.props).join(",");
}, }
}, },
methods: { methods: {
edit(meta) { edit(meta) {
...@@ -148,23 +173,28 @@ ...@@ -148,23 +173,28 @@
this.meta = clonePureObj(meta); this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id; this.oldMetaID = this.meta.id;
events.$emit('edit-open', this.meta.script); events.$emit("edit-open", this.meta.script);
}, },
onEditSave(code){ onEditSave(code) {
this.$set(this.meta, 'script', code); this.$set(this.meta, "script", code);
}, },
onClickEditProps() { onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props); this.$refs.propsEditorDialog.edit(this.meta.props);
}, },
save(isPreview) { save(isPreview) {
this.$refs.form.validate((valid) => { this.$refs.form.validate(valid => {
if (valid) { if (valid) {
if (this.oldMetaID !== this.meta.id && this.$store.getters.metaIDExists(this.meta.id)) { if (
this.$alert(this.$t('This Meta ID is in use, can not save'), this.$t('Alert')) this.oldMetaID !== this.meta.id &&
.catch((e) => { this.$store.getters.metaIDExists(this.meta.id)
}); ) {
this.$alert(
this.$t("This Meta ID is in use, can not save"),
this.$t("Alert")
).catch(e => {});
} else { } else {
this.$emit('input', this.meta, isPreview); this.meta.script = this.$refs.codeEditor.editor.getValue();
this.$emit("input", this.meta, isPreview);
this.visible = false; this.visible = false;
} }
} else { } else {
...@@ -187,9 +217,7 @@ ...@@ -187,9 +217,7 @@
try { try {
let meta = JSON.parse(metaStr); let meta = JSON.parse(metaStr);
this.meta = meta; this.meta = meta;
} catch (e) { } catch (e) {}
}
} }
}, },
focusPasteBoard() { focusPasteBoard() {
...@@ -200,9 +228,8 @@ ...@@ -200,9 +228,8 @@
//console.log(code); //console.log(code);
} }
} }
} };
</script> </script>
<style scoped> <style scoped>
</style> </style>
\ No newline at end of file
src/views/Editor/components/MonacoEditor.vue 0 → 100644
View file @ b41682cd
<template>
<div id="container"></div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
name: "MonacoEditor",
props: {
options: Object,
code: String
},
mounted() {
const { options, code } = this;
const defaultConfig = {
language: "javascript",
value: "",
minimap: {
enabled: false
}
};
// compiler options
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES6,
allowNonTsExtensions: true
});
// extra libraries
monaco.languages.typescript.javascriptDefaults.addExtraLib(
[window.__data.types].join("\n")
);
const config = Object.assign({}, defaultConfig, options, { value: code });
console.log(config);
this.editor = monaco.editor.create(
document.getElementById("container"),
config
);
}
};
</script>
<style lang="scss" scoped>
#container {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
vue.config.js
View file @ b41682cd
const serverHost = 'http://10.10.95.74:7777'; const serverHost = 'http://10.10.95.74:7777'
//const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = { module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '//yun.duiba.com.cn/editor/zeroing/v1/' : '', publicPath: process.env.NODE_ENV === 'production' ? '//yun.duiba.com.cn/editor/zeroing/v1/' : '',
...@@ -26,9 +26,10 @@ module.exports = { ...@@ -26,9 +26,10 @@ module.exports = {
},*/ },*/
configureWebpack: { configureWebpack: {
plugins: [ plugins: [
/*new MonacoWebpackPlugin({ new MonacoWebpackPlugin({
languages: ['html', 'javascript', 'json'] languages: ['javascript', 'typescript', 'json'],
})*/ publicPath: "/monaco"
})
] ]
} }
}; }
yarn.lock
View file @ b41682cd
...@@ -5969,6 +5969,18 @@ moment@^2.24.0: ...@@ -5969,6 +5969,18 @@ moment@^2.24.0:
resolved "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b" resolved "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
integrity sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s= integrity sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s=
monaco-editor-webpack-plugin@^1.8.1:
version "1.8.1"
resolved "https://registry.npm.taobao.org/monaco-editor-webpack-plugin/download/monaco-editor-webpack-plugin-1.8.1.tgz#5701bfce16c14c51503a607726d97fd92784af26"
integrity sha1-VwG/zhbBTFFQOmB3Jtl/2SeEryY=
dependencies:
loader-utils "^1.2.3"
monaco-editor@^0.19.0:
version "0.19.0"
resolved "https://registry.npm.taobao.org/monaco-editor/download/monaco-editor-0.19.0.tgz#c6e774210f3b292ff739e96f45a1cc78bf5ac2e7"
integrity sha1-xud0IQ87KS/3OelvRaHMeL9awuc=
move-concurrently@^1.0.1: move-concurrently@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment