After attempting to implement the code provided by Andres Abadia, I am still encountering an error:
loader is not configured
(for those using JavaScript, remember to remove the lang="ts" from the script tag)
Despite ace-code working, there seems to be a problem with loading themes. Why is this happening?
https://i.stack.imgur.com/kcnA1.png
The issue lies in utilizing the raw files of the ace-code package as if they were meant for a standalone framework environment. If you wish to incorporate highlights or other features from it, you must load additional scripts via CDN individually, leading to potential conflicts with the defined key. My suggestion is to directly use the required package which is ace-builds, accompanied by all the generated files (I can provide snippets for Vue2 & Vue3). The package includes a specific webpack-resolver from the Ace team that enables your loader (Webpack in this case, otherwise Vite might throw a different error) to efficiently load and interpret all the necessary files. By following this approach along with the provided snippets, you can effectively work with the external library Ace code.
Remember to install file-loader as a dev dependency to facilitate loading the generated file from the ace-builds package.
You may still encounter require errors due to the library's reliance on require statements. With the information provided, consider employing a loader or transpiler like Babel to translate from CommonJS to ES6.
https://i.stack.imgur.com/wL805.png
For Vue2:
<template>
<div class="ace-container">
<!-- ID is used in official documents, but refraining from its use here avoids potential packaging issues later on; instead, utilize ref or DOM -->
<div class="ace-editor" ref="ace"></div>
</div>
</template>
<script>
import ace from'ace-builds'
import'ace-builds/webpack-resolver'
import'ace-builds/src-noconflict/theme-monokai'
import'ace-builds/src-noconflict/mode-javascript'
export default {
mounted () {
this.aceEditor = ace.edit(this.$refs.ace, {
maxLines: 20,
minLines: 10,
fontSize: 14,
theme: this.themePath,
mode: this.modePath,
tabSize: 4
})
},
data () {
return {
aceEditor: null,
themePath:'ace/theme/monokai',
modePath:'ace/mode/javascript'
}
}
}
</script>
<style scoped>
.ace-editor {
width: 100%;
height: 400px;
}
</style>
For Vue3:
<template>
<div class="ace-container">
<!-- Similar to Vue2, avoid using ID and opt for ref or DOM to prevent future packaging problems -->
<div id="editor"></div>
</div>
</template>
<script setup>
import {onMounted} from "vue";
import ace from "ace-builds";
import 'ace-builds/webpack-resolver'
import 'ace-builds/src-noconflict/theme-clouds';
import 'ace-builds/src-noconflict/mode-latex';
onMounted(() => {
ace.edit('editor', {
maxLines: 20,
minLines: 10,
fontSize: 14,
theme: 'ace/theme/monokai',
mode: 'ace/mode/javascript',
tabSize: 4
})
});
</script>
<style scoped>
#editor {
width: 100%;
height: 400px;
}
</style>