vue3-ace-editor代码编辑器使用

大家好，欢迎来到IT知识分享网。

下载

安装 ace-builds 及vue3-ace-editor

引入并封装组件

引入：import { VAceEditor } from "vue3-ace-editor";
常用属性根据父组件传递

const props = defineProps({ 
    lang: { 
    type: String, default: "sql",//可以传javaScript或者json，需要有对应文件的引入 }, // 是否只读 readonly: { 
    type: Boolean, default: false, }, // 是否显示行数 showLineNumbers: { 
    type: Boolean, default: true, }, // 是否显示左侧行数那列 showGutter: { 
    type: Boolean, default: true, }, hasBorder: { 
    type: Boolean, default: true, }, // 是否高亮选中行 highlightActiveLine: { 
    type: Boolean, default: true, }, }); 

template：

<template> <VAceEditor class="edit_box" v-model:value="editorValue" v-bind="attr" :lang="lang" theme="tomorrow" :readonly="readonly" ref="aceDom" @init="editorInit" :class="{ border: hasBorder }" :options="{ 
    fontSize: 14, //代码提示及自动补全 enableSnippets: true, enableLiveAutocompletion: true, enableBasicAutocompletion: true, tabSize: 2, placeholder: '/* 请使用 SQL 函数或片段表达式 对左侧的属性字段进行计算编辑 */', showPrintMargin: false, highlightActiveLine: highlightActiveLine, showLineNumbers: showLineNumbers, showGutter: showGutter, wrap: true,//自动换行 }" /> </template> 

init函数会接收到组件实例，可以将其抛给父组件，则可以父组件中调用实例，完成光标处插入代码片等功能editor.insert()

const emit = defineEmits(["getEditorInstance"]); const attr = useAttrs(); const aceDom = ref(); const editor = ref(); const editorValue = ref(""); const editorInit = (editorInstance) => { 
    editor.value = editorInstance; //editor实例 }; onMounted(() => { 
    emit("getEditorInstance", editor.value); }); 

引入mode 和 theme 这里可以选择自己想要的主题和mode

import ace from 'ace-builds'; import modeSqlUrl from "ace-builds/src-noconflict/mode-sql?url"; // import "ace-builds/webpack-resolver" //sql mode ace.config.setModuleUrl('ace/mode/sql', modeSqlUrl); import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url'; ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl); import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url'; ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl); import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url'; ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl); import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url'; ace.config.setModuleUrl('ace/theme/github', themeGithubUrl); import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url'; ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl); import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url'; ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl); import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url'; ace.config.setModuleUrl('ace/mode/base', workerBaseUrl); import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'; ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl); import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'; ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl); import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url'; ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl); import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url'; ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl); import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url'; ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl); // import snippetsSqllUrl from "ace-builds/src-noconflict/snippets/sql"; ace.config.setModuleUrl('ace/snippets/sql', snippetsSqllUrl); // import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url'; ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl); import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url'; ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl); import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'; ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl); import 'ace-builds/src-noconflict/ext-language_tools'; ace.require("ace/ext/language_tools"); 

完整代码

<template> <VAceEditor class="edit_box" v-model:value="editorValue" v-bind="attr" :lang="lang" theme="tomorrow" :readonly="readonly" ref="aceDom" @init="editorInit" :class="{ border: hasBorder }" :options="{ 
    fontSize: 14, //代码提示及自动补全 enableSnippets: true, enableLiveAutocompletion: true, enableBasicAutocompletion: true, tabSize: 2, placeholder: '/* 请使用 SQL 函数或片段表达式 对左侧的属性字段进行计算编辑 */', showPrintMargin: false, highlightActiveLine: highlightActiveLine, showLineNumbers: showLineNumbers, showGutter: showGutter, wrap: true,//自动换行 }" /> </template> <script setup lang="ts"> import { 
    onMounted, ref, useAttrs, watch } from "vue"; import { 
    VAceEditor } from "vue3-ace-editor"; import "./vace.config"; const props = defineProps({ 
    lang: { 
    type: String, default: "sql", }, // 是否只读 readonly: { 
    type: Boolean, default: false, }, // 是否显示行数 showLineNumbers: { 
    type: Boolean, default: true, }, // 是否显示左侧行数那列 showGutter: { 
    type: Boolean, default: true, }, hasBorder: { 
    type: Boolean, default: true, }, // 是否高亮选中行 highlightActiveLine: { 
    type: Boolean, default: true, }, }); const emit = defineEmits(["getEditorInstance"]); const attr = useAttrs(); const aceDom = ref(); const editor = ref(); const editorValue = ref(""); const editorInit = (editorInstance) => { 
    editor.value = editorInstance; //editor实例 }; onMounted(() => { 
    emit("getEditorInstance", editor.value); }); </script> <style lang="less"> .edit_box { 
    width: 100%; height: 100%; .ace_scroller .ace_content .ace_placeholder { 
    color: var(--grey-text-color1) !important; } } .border { 
    border: 1px solid #c0c4cc; border-radius: 5px; } </style> 

vace.config.js

import ace from 'ace-builds'; import modeSqlUrl from "ace-builds/src-noconflict/mode-sql?url"; // import "ace-builds/webpack-resolver" ace.config.setModuleUrl('ace/mode/sql', modeSqlUrl); import modeJavascriptUrl from 'ace-builds/src-noconflict/mode-javascript?url'; ace.config.setModuleUrl('ace/mode/javascript', modeJavascriptUrl); import modeHtmlUrl from 'ace-builds/src-noconflict/mode-html?url'; ace.config.setModuleUrl('ace/mode/html', modeHtmlUrl); import modeYamlUrl from 'ace-builds/src-noconflict/mode-yaml?url'; ace.config.setModuleUrl('ace/mode/yaml', modeYamlUrl); import themeGithubUrl from 'ace-builds/src-noconflict/theme-github?url'; ace.config.setModuleUrl('ace/theme/github', themeGithubUrl); import themeChromeUrl from 'ace-builds/src-noconflict/theme-chrome?url'; ace.config.setModuleUrl('ace/theme/chrome', themeChromeUrl); import themeMonokaiUrl from 'ace-builds/src-noconflict/theme-monokai?url'; ace.config.setModuleUrl('ace/theme/monokai', themeMonokaiUrl); import workerBaseUrl from 'ace-builds/src-noconflict/worker-base?url'; ace.config.setModuleUrl('ace/mode/base', workerBaseUrl); import workerJsonUrl from 'ace-builds/src-noconflict/worker-json?url'; ace.config.setModuleUrl('ace/mode/json_worker', workerJsonUrl); import workerJavascriptUrl from 'ace-builds/src-noconflict/worker-javascript?url'; ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl); import workerHtmlUrl from 'ace-builds/src-noconflict/worker-html?url'; ace.config.setModuleUrl('ace/mode/html_worker', workerHtmlUrl); import workerYamlUrl from 'ace-builds/src-noconflict/worker-yaml?url'; ace.config.setModuleUrl('ace/mode/yaml_worker', workerYamlUrl); import snippetsHtmlUrl from 'ace-builds/src-noconflict/snippets/html?url'; ace.config.setModuleUrl('ace/snippets/html', snippetsHtmlUrl); // import snippetsSqllUrl from "ace-builds/src-noconflict/snippets/sql"; ace.config.setModuleUrl('ace/snippets/sql', snippetsSqllUrl); // import snippetsJsUrl from 'ace-builds/src-noconflict/snippets/javascript?url'; ace.config.setModuleUrl('ace/snippets/javascript', snippetsJsUrl); import snippetsYamlUrl from 'ace-builds/src-noconflict/snippets/yaml?url'; ace.config.setModuleUrl('ace/snippets/javascript', snippetsYamlUrl); import snippetsJsonUrl from 'ace-builds/src-noconflict/snippets/json?url'; ace.config.setModuleUrl('ace/snippets/json', snippetsJsonUrl); import 'ace-builds/src-noconflict/ext-language_tools'; ace.require("ace/ext/language_tools"); 

后续