vue中使用代码编辑器 Ace editor
一、介绍Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime,Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。二、安装npm install --save-dev vue2-ace-editor三、引入插件// 全局引入main.jsimport Editor from 'vue2-ace-editor';V
·
一、介绍
Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime,Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。
二、安装
npm install --save-dev vue2-ace-editor
三、引入插件
// 全局引入 main.js
import Editor from 'vue2-ace-editor';
Vue.use(Editor)
//组件中引入
import Editor from 'vue2-ace-editor';
components: {
Editor,
},
四、使用示例
<template>
<div class="codeEditBox">
<editor
v-model="code"
@init="editorInit"
@input='codeChange'
lang="javascript"
:options="editorOptions"
theme="chrome"
></editor>
</div>
</template>
<script>
import Editor from 'vue2-ace-editor';
export default {
components: {
Editor,
},
data() {
return {
code: '',
editorOptions: {
// 设置代码编辑器的样式
enableBasicAutocompletion: true, //启用基本自动完成
enableSnippets: true, // 启用代码段
enableLiveAutocompletion: true, //启用实时自动完成
tabSize: 2, //标签大小
fontSize: 18, //设置字号
showPrintMargin: false, //去除编辑器里的竖线
},
};
},
methods: {
codeChange(val){
console.log(val);
},
editorInit() {
require('brace/theme/chrome');
require('brace/ext/language_tools'); //language extension prerequsite...
require('brace/mode/yaml');
require('brace/mode/json');
require('brace/mode/less');
require('brace/snippets/json');
require('brace/mode/lua');
require('brace/snippets/lua');
require('brace/mode/javascript');
require('brace/snippets/javascript');
},
},
};
</script>
<style scoped>
.codeEditBox{
width:100%;
height:200px;
border:1px solid #dcdee2;
}
</style>
五、效果
更多推荐
已为社区贡献11条内容
所有评论(0)