vue.js AEC代码编辑器

AEC代码编辑器

安装
组件
效果
效果地址

安装

npm install ace-builds --save-dev

组件

  <div class="ace-container"><div class="event-panel"><div><div class="_li"><label class="title">语言</label><el-select class="_li_val" v-model="modePath" @change="handleModelPathChange" size="mini" value-key="name"><el-option v-for="mode in modeArray" :key="mode.name" :label="mode.name" :value="mode.path"></el-option></el-select></div><div class="_li"><label class="title">参数</label><el-input class="_li_val" placeholder="请输入内容" size="mini" v-model="inputDa" clearable></el-input></div></div></div><div class="ace-editor" ref="ace"></div><div class="_li result ma-t-20"><el-button class="ma-r-20" type="primary" size="mini" plain @click="debEvel">调试</el-button><label class="title">结果：</label><span class="item-li" :class="isValidate ? 'item-c' : 'item-warning'">{{ resultDa }}</span></div></div>
</template>
<script>
import ace from "ace-builds";
import "ace-builds/src-noconflict/snippets/javascript";
import "ace-builds/src-noconflict/snippets/html";
import "ace-builds/src-noconflict/snippets/css";
import "ace-builds/src-noconflict/snippets/scss";
import "ace-builds/src-noconflict/snippets/json";
import "ace-builds/src-noconflict/snippets/java";
import "ace-builds/src-noconflict/snippets/text";import "ace-builds/src-noconflict/theme-xcode";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/mode-json"
import "ace-builds/src-noconflict/theme-monokai";
import "ace-builds/src-noconflict/ext-language_tools";
// 解决build打包时包多大的问题（webpack-resolver原始包里引入所以的js文件，这里只引入了我们需要的js）
ace.config.setModuleUrl('ace/mode/javascript_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-javascript.js'))
ace.config.setModuleUrl('ace/theme/xcode', require('file-loader?esModule=false!ace-builds/src-noconflict/theme-xcode.js'))
ace.config.setModuleUrl('ace/ext/language_tools', require('file-loader?esModule=false!ace-builds/src-noconflict/ext-language_tools.js'))
ace.config.setModuleUrl('ace/snippets/javascript', require('file-loader?esModule=false!ace-builds/src-noconflict/snippets/javascript.js'))
ace.config.setModuleUrl('ace/mode/json_worker', require('file-loader?esModule=false!ace-builds/src-noconflict/worker-json.js'))const modeArray = [{name: "JavaScript",path: "ace/mode/javascript",},{name: "Json",path: "ace/mode/json",},{name: "Text",path: "ace/mode/text",},
];export default {props: {value: String,},mounted() {this.aceEditor = ace.edit(this.$refs.ace, {maxLines: 20,minLines: 10,fontSize: 14,value: this.value ? this.value : "",theme: this.themePath,mode: this.modePath,// wrap: this.wrap,tabSize: 4,});// 激活自动提示this.aceEditor.setOptions({enableSnippets: true,enableLiveAutocompletion: true,enableBasicAutocompletion: true,});// // 事件监听this.aceEditor.getSession().on("change", this.change);// 默认换行this.aceEditor.getSession().setUseWrapMode(true);// 默认代码this.aceEditor.getSession().setValue(this.modelAce);},data() {return {aceEditor: null,toggle: true,wrap: true,themePath: "ace/theme/monokai",modePath: "ace/mode/javascript",modeArray: modeArray,resultDa: "",inputDa: '',modelAce: '\nfunction hanlde(data){\n\t//请输入处理脚本\n\t\n\treturn data;\n}',isValidate: true,};},methods: {toggleConfigPanel() {this.toggle = !this.toggle;},change() {let das = this.aceEditor.getSession().getValue()console.log(das, '监听输入')},// 语言handleModelPathChange(modelPath) {this.aceEditor.getSession().setMode(modelPath);},// 调试 debuggerdebEvel() {try {this.isValidate = true;const func = this.aceEditor.getSession().getValue();const funs = '(' + func + ')(' + JSON.stringify(this.inputDa) + ')';this.resultDa = eval(funs);} catch {this.isValidate = false;this.resultDa = "执行异常！请检查执行代码块！";}},},
};
</script><style lang='scss' scoped>
.ma-t-20 {margin-top: 20px;
}.ma-l-20 {margin-left: 20px;
}.ma-r-20 {margin-right: 20px;
}.ace-editor {// height: 300px !important;width: 600px;
}
.item-warning {color: red;}.item-c {color: #333;}.ace-container {.event-panel {._li {display: flex;margin: 20px 10px;._li_val {width: 200px;}.title {margin: 0 10px;font-size: 14px;}}}
}
</style>

效果

效果地址

在线效果：https://www.w3cschool.cn/tryrun/runcode?lang=javascript

官网测试：https://ace.c9.io/build/kitchen-sink.html

vue.js AEC代码编辑器相关推荐

vue-codemirror实现一个前端代码在线编辑器，可处理 HTML,VUE,JS,CSS代码在线编辑
先找个目录创建一个vue项目例如我们想要项目叫 editor 在终端执行 vue create editor 2和3其实都可以但个人建议最近还是2会更稳定一些在终端执行 npm i code ...
vue.js json_带有Vue.js的JSON编辑器
vue.js json v-jsoneditor (v-jsoneditor) Vue JSONEditor. Vue JSONEditor. View Demo 查看演示 Download Sour ...
Vue.js编写代码时的错误提示
Vue.js的错误提示 vue.js:634 [Vue warn]: Error compiling template: 错误提示图片: 部分代码图片: 此错误原因是缺少大括号改为即可改正错误!! ...
CodeMIrror.js在线代码编辑器简单使用
代码高亮是程序员的刚需,不管是在笔记类,论坛类,博客类web网站中,都对代码高亮提出要求,不高亮的代码阅读体验很差,codeMirror是一个前端代码高亮库,使用方便.CodeMirror 是一款在线 ...
vue集成codemirror代码编辑器
点击上方" 青年码农 "关注回复"特效源码"可获取各种资料 CodeMirror是一个用 JavaScript 为浏览器实现的通用文本编辑器.它专门用于编辑代 ...
Vue/js 富文本编辑器、excel编辑器合集
Vue 富文本编辑器 wangEditor JMEditor vue-quill-editor vue2-editor simditor kindeditor ueditor tinymce cked ...
Vue.js新手入门指南
最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在 ...
什么是vue.js？（概念很清楚）
Vue.js新手入门指南最近在逛各大网站,论坛,以及像SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,楼主自己也趁着这个大前端的热潮,着手学习了一段时间的 ...
Vue.js 2.0 学习重点记录
Vue.js兼容性 Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不能模拟的 ECMAScript 5 特性. Vue.js.js 支持所有兼容 EC ...

vue.js AEC代码编辑器

AEC代码编辑器

安装

组件

效果

效果地址

vue.js AEC代码编辑器相关推荐

最新文章

热门文章