标签：封装 ace default json readOnly editor mode

因为前端页面上有通过编写代码来执行而得出结果的场景，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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。