代码拉取完成，页面将自动刷新
A packaging of ace. Inspired by vue2-ace-editor, but supports Vue 3
ace-builds must be installed alongside vue3-ace-editor using your favorite package manager.
<script setup>
import { ref } from 'vue';
import { VAceEditor } from 'vue3-ace-editor';
import 'ace-builds/src-noconflict/mode-json'; // Load the language definition file used below
import 'ace-builds/src-noconflict/theme-chrome'; // Load the theme definition file used below
const content = ref(JSON.stringify({ message: 'Hello Ace' }));
</script>
<template>
<v-ace-editor
v-model:value="content"
lang="json"
theme="chrome"
style="height: 300px" />
</template>
Property v-model:value is required. <v-ace-editor> has no height by default. Its height must be specified manually, or set both min-lines and max-lines to make the editor's height auto-grow.
Property lang, theme is same as ace-editor's doc
Using of ace-builds/webpack-resolver is removed due to bug https://github.com/CarterLi/vue3-ace-editor/issues/3. You MUST import theme and mode yourself. eg.
// You MUST make sure that `ace-builds` or `vue3-ace-editor` (which imports `ace-builds` internally) is loaded before importing `mode` and `theme`
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-chrome';
To use dynamic loading to avoid first-load overhead
import ace from 'ace-builds';
import modeJsonUrl from 'ace-builds/src-noconflict/mode-json?url';
ace.config.setModuleUrl('ace/mode/json', modeJsonUrl);
import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url';
ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl);
Note that to make search box (Ctrl+F or Command+F) work, ext-searchbox must also be loaded.
import extSearchboxUrl from 'ace-builds/src-noconflict/ext-searchbox?url';
ace.config.setModuleUrl('ace/ext/searchbox', extSearchboxUrl);
Find all supported themes and modes in node_modules/ace-builds/src-noconflict
width / height props needed.readonly: This Boolean attribute indicates that the user cannot modify the value of the control.placeholder: A hint to the user of what can be entered in the control.wrap: Indicates whether the control wraps text.printMargin: A short hand of showPrintMargin and printMarginColumn.minLines and maxLines: Specifiy the minimum and maximum number of lines.focus, blur, selectAll provided as shortcuts.Use getAceInstance
<script setup>
import { ref, onMounted } from 'vue';
const aceRef = ref(null);
onMounted(() => {
console.log(aceRef.value.getAceInstance());
})
</script>
<template>
<v-ace-editor ref="aceRef" v-bind="..." />
</template>
@init is provided for vue2-ace-editor compatibility only but is not recommanded to use.
To enable syntax checking, module ace/mode/lang_worker must be registered, and option useWorker: true must be set.
Take JSON for example:
import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'; // For vite
import workerJsonUrl from 'file-loader?esModule=false!ace-builds/src-noconflict/worker-json.js'; // For webpack / vue-cli
ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl);
<v-ace-editor v-model:value="json" lang="json" :options="{ useWorker: true }" />
See also https://github.com/CarterLi/vue3-ace-editor/issues/3#issuecomment-768190528 to load the worker file from CDN
Since ace doesn't support SSR, using it with Nuxt can be tricky. You must make sure that ace related things are loaded only at client side.
<script setup>
import { markRaw, onMounted, ref } from 'vue';
const VAceEditor = ref('div'); // Stores dynamic loaded component. Before `vue3-ace-editor` is loaded, a `div` is used as a placeholder
const content = ref(JSON.stringify({ platform: 'Nuxt', env: 'SSR' }, null, 2));
onMounted(async () => { // onMounted is a client-only lifecycle hook
await import('ace-builds'); // To importing things in a function, dynamic import must be used
await import('ace-builds/src-noconflict/mode-json');
await import('ace-builds/src-noconflict/theme-chrome');
VAceEditor.value = markRaw((await import('vue3-ace-editor')).VAceEditor);
});
</script>
<template>
<div>
<component :is="VAceEditor" v-model:value="content" lang="json" theme="chrome" style="height: 400px" />
<textarea :value="content" style="width: 100%; margin-top: 10px" rows="5" />
</div>
</template>
Full example: https://stackblitz.com/edit/github-oeoxgm?file=app.vue
MIT
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手