ace-editor的封装使用

因为前端页面上有通过编写代码来执行而得出结果的场景，ace-editor可以嵌入页面和js应用程序里，因此来选用。

引入CDN

包括样式，语言，json格式

<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.9/ace.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.9/ext-beautify.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.9/ext-language_tools.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.9/theme-xcode.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.9/mode-yaml.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.9/mode-javascript.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/ace/1.4.9/mode-json.js"></script>

新建ace-editor.vue组件

<template>
    <div ref="editor" :style="{height:height}" class="ace-editor" :id="Id"></div>
</template>

<script>
import uniqueId from 'lodash/uniqueId'
export default {
    name: "AceEditor",
    props:{
        value:{
            type:String,
            default: ""
        },
        height:{
            type:String,
            default:"400px"
        },
        readOnly:{
            type:Boolean,
            default: false
        },
        mode:{
            type:String,
            default:"json"
        }
    },
    mounted(){
        this.initEditor()
    },
    data(){
        this.editor =null;
        this.Id = uniqueId('aceEditor')
        return{
            
        }        
    },
    computed:{
        code:{ //数据更新通知父组件更新数据
            set(val){
                this.$emit('input',val)
            },
            get(){ 
                return this.value
            }
        },
    },
    watch:{
        code(){ //父组件中数据变化，同步到ace Editor
            //aceEditor.setValue调用后默认会全选所有文本内容，需要对光标进行特殊处理
            // 缓存光标位置
            const position = this.editor.getCursorPosition();
            this.syncData()
            this.editor.clearSelection();
            this.editor.moveCursorToPosition(position);
        },
        mode(mode){
            this.changeMode(mode)
        },
        readOnly(b){
            this.setReadOnly(b)
        }
    },
    methods: {
        initEditor(){
            this.editor = ace.edit(this.Id);
            this.editor.setTheme('ace/theme/xcode');
            //编辑时同步数据
            this.editor.session.on('change',(ev)=>{
                this.code = this.editor.getValue()
            })
            //字体大小
            this.editor.setFontSize(14)
            this.syncData()
            this.syncOptions()
        },
        
        changeMode(modeName){
            let mode ={
                yaml:'ace/mode/yaml',
                json:'ace/mode/json',
                javascript:'ace/mode/javascript'
            }
            this.editor.session.setMode(mode[modeName]);
        },
        setReadOnly(readOnly){
            this.editor.setReadOnly(readOnly)
        },
        syncOptions(){
            this.setReadOnly(this.readOnly)
            this.changeMode(this.mode)
        },
        syncData(){ 
            this.editor.setValue(this.code)
        },
   
    }
}
</script>

<style scoped>
    .ace-editor{
        position: relative;
        height:300px;
        border: 1px solid #ccc;
        border-radius:2px;
    }
    .ace-editor /deep/ .ace_print-margin{ 
        display:none;
    }
</style>

在需要引用的页面里

//代码是json结构
<aceEditor v-model="text" mode="json" :height="'95%'"></aceEditor>
//代码是python
<aceEditor v-model="text" mode="python" :height="'95%'"></aceEditor>

import aceEditor from "../components/ace-editor.vue"

标签：封装,ace,default,json,readOnly,editor,mode
来源： https://blog.csdn.net/qq_43459332/article/details/121674108