126 lines
3.3 KiB
Vue
126 lines
3.3 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<editor
|
|||
|
|
:value="content"
|
|||
|
|
@input="handleInput"
|
|||
|
|
@init="editorInit"
|
|||
|
|
:lang="aceConfig.selectLang"
|
|||
|
|
:theme="aceConfig.selectTheme"
|
|||
|
|
:options="aceConfig.options"
|
|||
|
|
width="100%"
|
|||
|
|
height="400px"/>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 编辑器主题
|
|||
|
|
const themes = [
|
|||
|
|
'xcode',
|
|||
|
|
'eclipse',
|
|||
|
|
'monokai',
|
|||
|
|
'cobalt'
|
|||
|
|
]
|
|||
|
|
// 编辑器语言
|
|||
|
|
const langs = [
|
|||
|
|
'c_cpp',
|
|||
|
|
'java',
|
|||
|
|
'javascript',
|
|||
|
|
'golang'
|
|||
|
|
]
|
|||
|
|
// tabs
|
|||
|
|
const tabs = [2, 4, 8]
|
|||
|
|
// 字体大小
|
|||
|
|
const fontSizes = [14, 15, 16, 17, 18, 19, 20, 21, 22]
|
|||
|
|
// 编辑器选项
|
|||
|
|
const options = {
|
|||
|
|
tabSize: 4, // tab默认大小
|
|||
|
|
showPrintMargin: false, // 去除编辑器里的竖线
|
|||
|
|
fontSize: 20, // 字体大小
|
|||
|
|
highlightActiveLine: true, // 高亮配置
|
|||
|
|
enableBasicAutocompletion: true, //启用基本自动完成
|
|||
|
|
enableSnippets: true, // 启用代码段
|
|||
|
|
enableLiveAutocompletion: true, // 启用实时自动完成
|
|||
|
|
}
|
|||
|
|
export default {
|
|||
|
|
name: "CodeEdit",
|
|||
|
|
components: {
|
|||
|
|
editor: require('vue2-ace-editor'),
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
visible: false, // 模态窗口显示控制
|
|||
|
|
aceConfig: { // 代码块配置
|
|||
|
|
langs, // 语言
|
|||
|
|
themes, // 主题
|
|||
|
|
tabs, // tab空格
|
|||
|
|
fontSizes,
|
|||
|
|
options, // 编辑器属性设置
|
|||
|
|
selectTheme: 'xcode', // 默认选择的主题
|
|||
|
|
selectLang: 'c_cpp', // 默认选择的语言
|
|||
|
|
readOnly: false, // 是否只读
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 接收父组件v-model传来的值
|
|||
|
|
model: {
|
|||
|
|
prop: 'content',
|
|||
|
|
event: 'change'
|
|||
|
|
},
|
|||
|
|
props: {
|
|||
|
|
content: String // content就是上面prop中声明的值，要保持一致
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 当该组件中的值改变时，通过该方法将该组件值传给父组件，实现组件间双向绑定
|
|||
|
|
handleInput(e) {
|
|||
|
|
this.$emit('change', e) // 这里e是每次子组件修改的值，change就是上面event中声明的，不要变
|
|||
|
|
},
|
|||
|
|
// 显示'编辑器设置'模态窗口
|
|||
|
|
showSettingModal() {
|
|||
|
|
this.visible = true
|
|||
|
|
},
|
|||
|
|
// '编辑器设置'模态窗口确认按钮回调
|
|||
|
|
handleOk() {
|
|||
|
|
this.visible = false
|
|||
|
|
// this.editorInit()
|
|||
|
|
},
|
|||
|
|
// 代码块主题切换
|
|||
|
|
handleThemeChange(value) {
|
|||
|
|
this.aceConfig.selectTheme = value
|
|||
|
|
this.editorInit()
|
|||
|
|
},
|
|||
|
|
// 代码块语言切换
|
|||
|
|
handleLangChange(value) {
|
|||
|
|
this.aceConfig.selectLang = value
|
|||
|
|
this.editorInit()
|
|||
|
|
},
|
|||
|
|
// tab切换
|
|||
|
|
handleTabChange(value) {
|
|||
|
|
this.aceConfig.options.tabSize = value
|
|||
|
|
this.editorInit()
|
|||
|
|
},
|
|||
|
|
// 字体大小切换
|
|||
|
|
handleFontChange(value) {
|
|||
|
|
this.aceConfig.options.tabSize = value
|
|||
|
|
this.editorInit()
|
|||
|
|
},
|
|||
|
|
// 代码块初始化
|
|||
|
|
editorInit () {
|
|||
|
|
require('brace/ext/language_tools') // language extension prerequsite...
|
|||
|
|
require(`brace/mode/${this.aceConfig.selectLang}`) // 语言
|
|||
|
|
require(`brace/theme/${this.aceConfig.selectTheme}`) // 主题
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.settingTitle{
|
|||
|
|
font-size: larger;
|
|||
|
|
}
|
|||
|
|
.settingDescription{
|
|||
|
|
font-size: small;
|
|||
|
|
color: #a8a8af
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|