main.vue
<template>
<div class="editor-container" :style="{ width: cW, height: cH }">
<slot></slot>
<div
ref="editorEle"
class="editAceWrap"
:class="className"
:style="{ width: cW, height: cH }"
></div>
</div>
</template>
<script setup name="VueAceEditor">
import ace from 'ace-builds';
import {
computed, onBeforeUnmount, watch } from "vue";
const {
proxy } = getCurrentInstance();
let props = defineProps({
lang: {
type: String,
default: "",
},
theme: {
type: String,
default: "",
},
fontSize: {
type: Number,
default: 12,
},
content: {
type: String,
default: "",
},
width: {
type: [String, Number],
default: "100%",
},
height: {
type: [String, Number],
default: "100%",
},
className: {
type: String,
default: "vue-ace-editor",
},
options: {
type: Object,
default: () => ({
}),
},
wrap: {
type: String,
default: "free",
},
readonly: {
type: Boolean,
default: false,
},
showPrintMargin: {
type: Boolean,
default: false,
},
});
let editor = ref(null);
let session = ref(null);
const cH = computed(() => {
if (typeof props.height === "number") return props.height + "px";
if (typeof props.height === "string") return props.height;
return "";
});
let cW = computed(() => {
if (typeof props.width === "number") return props.width + "px";
if