Skip to content

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

添加编辑器

parent 22a21b2b
Hide whitespace changes
Inline Side-by-side
Showing with 287 additions and 199 deletions
public/index.html
View file @ b41682cd
......@@ -17,8 +17,9 @@
</noscript>
<script>
window.__data = {
token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjA4NSwibmFtZSI6IuWKs-eQquWzsCIsImFjY291bnQiOiJsYW9xaWZlbmciLCJlbWFpbCI6Imxhb3FpZmVuZ0BkdWliYS5jb20uY24iLCJtb2JpbGUiOiIxMzQ1Njc3NDE1MyIsImRpbmdVc2VySWQiOiI1MDY5MDYyOTIxMjkxMDAxIiwibW9kZWxBdXRob3JpemUiOmZhbHNlLCJsb2dpblRpbWVvdXQiOjE0ODA5LCJnbXRDcmVhdGUiOjE1MzQ0MTIwMTUwMDAsImdtdE1vZGlmaWVkIjoxNTczODgyMDk2MDAwLCJzeXN0ZW1JZFNldCI6WzAsMSwzNCwyMjcsMzYsMzcsMjMxLDIwMywxOSwyMSwyNDYsMjMsMjUsMjQ5LDI3LDMwXSwiaWF0IjoxNTc1MzQwMzg2fQ.2JEYMRx6wbJsMIMh3quyM14OsoMz_iJRq4Az_xz-WTc' : '$TOKEN$' %>",
apiHost : "<%= process.env.NODE_ENV === 'development' ? 'http://beacon.duibadev.com.cn' : '$API_HOST$' %>"
token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjU0NywibmFtZSI6IuWNnum-meS6rSIsImFjY291bnQiOiJiaWFubG9uZ3RpbmciLCJlbWFpbCI6ImJpYW5sb25ndGluZ0BkdWliYS5jb20uY24iLCJtb2JpbGUiOiIxNTg2OTE3NDMxMSIsImRpbmdVc2VySWQiOiIwMTE1MTgyMTEyMjE3OTYzNzAiLCJtb2RlbEF1dGhvcml6ZSI6ZmFsc2UsImxvZ2luVGltZW91dCI6NzczNjEsImdtdENyZWF0ZSI6MTU1OTUyNjcxNDAwMCwiZ210TW9kaWZpZWQiOjE1NzM3NDk1OTEwMDAsInN5c3RlbUlkU2V0IjpbMCwxLDM0LDM2LDM3LDIzMSwyMDMsNDQsMTksMjEsMjQ2LDIzLDI0OSwyNSwyNywzMF0sImlhdCI6MTU3Nzk1MjgxNH0.GNeP25ZZK5ca7rvwtj2BaQ3GZatGNSR3CthSN98PSD4' : '$TOKEN$' %>",
apiHost : "<%= process.env.NODE_ENV === 'development' ? 'http://beacon.duibadev.com.cn' : '$API_HOST$' %>",
types: `$TYPES$`
}
</script>
<div id="app"></div>
......
src/views/Editor/behavior-editor/MetaEditorDialog.vue
View file @ b41682cd
<template>
<el-dialog :title="$t('Meta Editor')" width="80%" :visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
fullscreen
:append-to-body="true"
custom-class="flex-dialog behavior-editor-dialog"
>
<div class="meta-editor-wrapper">
<el-form 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>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable"/>
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-dialog
:title="$t('Meta Editor')"
width="80%"
:visible.sync="visible"
:close-on-click-modal="false"
:close-on-press-escape="false"
:show-close="false"
fullscreen
:append-to-body="true"
custom-class="flex-dialog behavior-editor-dialog"
>
<div class="meta-editor-wrapper">
<el-form
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>
<el-form-item prop="id" :label="$t('ID')">
<el-input v-model="meta.id" :placeholder="$t('ID')" :readonly="!editable" />
</el-form-item>
<el-form-item prop="name" :label="$t('Name')">
<el-input v-model="meta.name" :placeholder="$t('Name')" :readonly="!editable" />
</el-form-item>
<el-form-item prop="desc" :label="$t('Desc')">
<el-input v-model="meta.desc" :placeholder="$t('Description')" :readonly="!editable" />
</el-form-item>
<!--<el-form-item prop="type" label="Type">
<el-input v-model="meta.type" :placeholder="$t('Type')" :readonly="!editable"/>
</el-form-item>
<el-form-item prop="group" label="Group">
<el-input v-model="meta.group" :placeholder="$t('Group')" :readonly="!editable"/>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<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>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select style="flex: 1;" v-model="meta.output" :disabled="!editable" allow-create filterable multiple
:placeholder="$t('Output')"/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<code-sync-indicator/>
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<codemirror ref="codeEditor" v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"/>
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<!--<el-button size="mini" plain @click="save(true)">{{$t('Save And Preview')}}</el-button>-->
<el-button size="mini" type="primary" plain @click="save(false)">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog"/>
</el-dialog>
</el-form-item>-->
<el-form-item :label="$t('Props')">
<el-link :underline="false" @click="onClickEditProps" :disabled="!editable">
<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>
</template>
<template v-else>{{$t('Empty')}}</template>
</el-link>
</el-form-item>
<el-form-item :label="$t('Output')">
<div style="display: flex;flex: 1;">
<el-select
style="flex: 1;"
v-model="meta.output"
:disabled="!editable"
allow-create
filterable
multiple
:placeholder="$t('Output')"
/>
</div>
</el-form-item>
</template>
</el-form>
<div style="margin-top: 5px;">
<code-sync-indicator />
<el-tag v-for="(item, key) in exposeVariables" :key="key" size="mini">{{item}}</el-tag>
</div>
<!--<el-input v-if="meta" class="script-editor" :readonly=" !editable" type="textarea" :placeholder="$t('Code')"
v-model="meta.script"></el-input>-->
<!-- <codemirror
ref="codeEditor"
v-if="meta"
v-model="meta.script"
:options="cmOptions"
@cursorActivity="onCodeChange"
/>-->
<monaco-editor ref="codeEditor" v-if="meta" :code="meta.script" :options="monacoConfig" />
</div>
<div slot="footer" class="dialog-footer">
<div class="button-bar">
<el-button-group style="margin-right: 20px;">
<el-button size="mini" plain @click="copyMeta">CopyMeta</el-button>
<el-popover>
<div ref="pasteBoard" @paste="onPaste">Click and Ctrl+V</div>
<el-button size="mini" slot="reference" plain @click="pasteMeta">PasteMeta</el-button>
</el-popover>
</el-button-group>
<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
<!--<el-button size="mini" plain @click="save(true)">{{$t('Save And Preview')}}</el-button>-->
<el-button size="mini" type="primary" plain @click="save(false)">{{$t('Save')}}</el-button>
</div>
</div>
<props-editor-dialog ref="propsEditorDialog" />
</el-dialog>
</template>
<script>
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import {codemirror} from "vue-codemirror";
import copy from 'copy-to-clipboard'
import {clonePureObj} from "../../../utils";
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/monokai.css'
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'];
import ElFormItem from "./inputs/form-item";
import PropsEditorDialog from "./PropsEditorDialog";
import * as monaco from "monaco-editor";
import MonacoEditor from "../components/MonacoEditor";
import copy from "copy-to-clipboard";
import { clonePureObj } from "../../../utils";
import events from "../../../global-events";
import CodeSyncIndicator from "../BottomBar/CodeSyncIndicator";
export default {
name: "MetaEditorDialog",
components: {CodeSyncIndicator, PropsEditorDialog, ElFormItem, codemirror},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
const exposeVariables = ["args", "props", "target", "global", "vm", "engine"];
rules: {
id: [
{required: true, trigger: 'blur'},
],
name: [
{required: true, trigger: 'blur'}
],
},
cmOptions: {
tabSize: 2,
styleActiveLine: true,
theme: 'default',
line: true,
matchBrackets: true,
autoCloseBrackets: true,
extraKeys: {
"Alt-Space": "autocomplete",
},
export default {
name: "MetaEditorDialog",
components: {
CodeSyncIndicator,
PropsEditorDialog,
ElFormItem,
monaco,
"monaco-editor": MonacoEditor
},
data() {
return {
visible: false,
meta: null,
propsEditorVisible: false,
exposeVariables,
lineNumbers: true,
mode: {name: 'javascript', globalVars: true},
gutters: ["CodeMirror-lint-markers"],
lint: true
}
}
},
mounted() {
events.$on('edit-save', this.onEditSave);
},
destroyed(){
events.$off('edit-save', this.onEditSave);
},
computed: {
editable() {
return this.meta;// && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(',')
},
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
rules: {
id: [{ required: true, trigger: "blur" }],
name: [{ required: true, trigger: "blur" }]
},
cmOptions: {
tabSize: 2,
styleActiveLine: true,
theme: "default",
line: true,
matchBrackets: true,
autoCloseBrackets: true,
extraKeys: {
"Alt-Space": "autocomplete"
},
events.$emit('edit-open', this.meta.script);
},
onEditSave(code){
this.$set(this.meta, 'script', code);
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save(isPreview) {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.oldMetaID !== this.meta.id && 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 {
this.$emit('input', this.meta, isPreview);
this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if (metaStr) {
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
} catch (e) {
lineNumbers: true,
mode: { name: "javascript", globalVars: true },
gutters: ["CodeMirror-lint-markers"],
lint: true
},
monacoConfig: {
language: "javascript"
}
};
},
mounted() {
events.$on("edit-save", this.onEditSave);
},
destroyed() {
events.$off("edit-save", this.onEditSave);
},
computed: {
editable() {
return this.meta; // && this.meta.type !== 'builtin';
},
props() {
return Object.keys(this.meta.props).join(",");
}
},
methods: {
edit(meta) {
this.visible = true;
this.meta = clonePureObj(meta);
this.oldMetaID = this.meta.id;
}
}
},
focusPasteBoard() {
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror) {
//codemirror.showHint();
//console.log(code);
}
}
}
events.$emit("edit-open", this.meta.script);
},
onEditSave(code) {
this.$set(this.meta, "script", code);
},
onClickEditProps() {
this.$refs.propsEditorDialog.edit(this.meta.props);
},
save(isPreview) {
this.$refs.form.validate(valid => {
if (valid) {
if (
this.oldMetaID !== this.meta.id &&
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 {
this.meta.script = this.$refs.codeEditor.editor.getValue();
this.$emit("input", this.meta, isPreview);
this.visible = false;
}
} else {
return false;
}
});
},
cancel() {
this.visible = false;
},
copyMeta() {
copy(JSON.stringify(this.meta));
},
pasteMeta() {
//setTimeout(this.focusPasteBoard, 1000, this);
},
onPaste(e) {
let metaStr = e.clipboardData.getData("Text");
if (metaStr) {
try {
let meta = JSON.parse(metaStr);
this.meta = meta;
} catch (e) {}
}
},
focusPasteBoard() {
this.$refs.pasteBoard.focus();
},
onCodeChange(codemirror) {
//codemirror.showHint();
//console.log(code);
}
}
};
</script>
<style scoped>
</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 = {
publicPath: process.env.NODE_ENV === 'production' ? '//yun.duiba.com.cn/editor/zeroing/v1/' : '',
......@@ -26,9 +26,10 @@ module.exports = {
},*/
configureWebpack: {
plugins: [
/*new MonacoWebpackPlugin({
languages: ['html', 'javascript', 'json']
})*/
new MonacoWebpackPlugin({
languages: ['javascript', 'typescript', 'json'],
publicPath: "/monaco"
})
]
}
};
}
yarn.lock
View file @ b41682cd
......@@ -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"
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:
version "1.0.1"
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