uniapp中使用ace在网页上做代码编辑器
A、安装
npm install ace-buildsB、在uniapp中使用
<template>
<view class="content">
<div id="editor">ssss</div>
<button v-on:click="bb">格式</button>
<button v-on:click="aa">压缩</button>
</view>
</template>
<script>
import ace from 'ace-builds/src-noconflict/ace';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/mode-golang';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/mode-html';
import 'ace-builds/src-noconflict/theme-monokai';
import 'ace-builds/src-noconflict/theme-dracula';
import 'ace-builds/src-noconflict/ext-language_tools';
import 'ace-builds/src-noconflict/ext-beautify';
export default {
data() {
return {
title: 'Hello'
}
},
mounted() {
this.initEditor();
},
onLoad() {
},
methods: {
initEditor() {
const editor = ace.edit('editor'); // 初始化Ace Editor
//editor.setTheme("ace/theme/dracula");
editor.setTheme("ace/theme/monokai"); //主题
editor.session.setMode("ace/mode/json"); //语言类型
//editor.session.setMode("ace/mode/golang");
//editor.session.setMode("ace/mode/javascript");
editor.setValue('{}'); // 设置初始代码值
},
bb(){
const editor = ace.edit('editor'); // 初始化Ace Editor
editor.session.setMode("ace/mode/json");
var code =editor.getValue();
JSON.stringify(JSON.parse(code), null, 2)
editor.setValue(JSON.stringify(JSON.parse(code), null, 2));
},
aa(){
const editor = ace.edit('editor'); // 初始化Ace Editor
editor.session.setMode("ace/mode/json");
var code =editor.getValue();
let ss = JSON.stringify(JSON.parse(code))
editor.setValue(ss);
}
}
}
</script>
<style>
#editor { width: 100%; height: 700px; font-size: 14px;line-height: 20px;}
</style>注意点：使用主题和模型一定要对应引用
如：使用editor.setTheme("ace/theme/dracula") 就需要引用 import '
ace-builds/src-noconflict/theme-dracula'
C、演示效果
