vue3使用ace-builds在线编辑器

引入依赖

npm install ace-builds --save-dev
//or
pnmp install ace-builds --save-dev
//or
yarn add ace-builds --save-dev

//如果引入ace报错需要安装
npm install vue-loader-v16 -D

封装文件

`<template>
  <div :style="{ height: props.height, width: props.width }" class="ace">
    <div class="_li">
      <label class="title">参数:</label>
      <a-input class="_li_val" placeholder="请输入内容" v-model:value="inputDa" clearable> </a-input>
      <a-button class="ma-r-20" type="success" plain @click="debEvel">调试</a-button>
      <a-button class="ma-r-20" type="primary" plain @click="handleChange" v-if="handle">保存</a-button>
    </div>
    <div id="editor" ref="aceDom"></div>
    <div class="_li result ma-t-20">
      <span class="titles">结果：</span>
      <span class="titles" :class="isValidate ? 'item-c' : 'item-warning'">{{ resultDa }}</span>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue';
  import ace from 'ace-builds';
  import { updateAmendmentRules } from '/@/api/sample/AmendmentRules';
  import { message } from 'ant-design-vue';
  import 'ace-builds/src-noconflict/theme-monokai'; // 默认设置的主题
  //自动提示规则
  import 'ace-builds/src-noconflict/snippets/javascript';
  import './AceConfig';
onMounted(() => {
    init();
  });
  const init = () => {
    aceEditor = ace.edit(aceDom.value);
    //提示功能
    ace.require('ace/ext/language_tools');
    aceEditor.setOptions({
      showPrintMargin:false,
      enableSnippets: true,
      enableLiveAutocompletion: true,
      enableBasicAutocompletion: true,
    });
    //设置默认值
    aceEditor.setValue(modelAce.value);
    //设置默认语言
    aceEditor.getSession().setMode('ace/mode/javascript');
  };
  const setVal = (val: string) => {
    aceEditor.setValue(val);
  };
  //调试结果
  function debEvel() {
    try {
      isValidate.value = true;
      const func = aceEditor.getValue();
      const funs = `(${func})(${JSON.stringify(inputDa.value)})`;
      resultDa.value = eval(funs);
    } catch {
      isValidate.value = false;
      resultDa.value = '执行异常！请检查执行代码块！';
    }
  }
  function handleChange() {
    let item = props.message;
    item.jsScript = aceEditor.getValue();
    updateAmendmentRules(item).then(res => {
      if (res.code == 200) {
        message.success(res.msg);
      }
    });
    inputDa.value = '';
  }
  //暴露方法
  defineExpose({
    setVal,
  });
</script>
<style scoped lang="scss">
  .ace {
    height: 100%;
    display: flex;
    flex-direction: column;
    #editor {
      flex-grow: 1;
      margin: 10px 0;
      border: 1px solid #c6e2ff;
    }
  }
  ._li {
    display: flex;
    margin: 10px 10px;

    ._li_val {
      width: 200px;
    }

    .title {
      margin: 5px 10px;
      font-size: 14px;
    }
    .titles {
      margin: 5px 10px;
      font-size: 20px;
    }
  }
  .item-warning {
    color: red;
  }

  .item-c {
    color: #333;
  }
  .ma-r-20 {
    margin: 0 0 0 20px;
  }
</style>

ace引用AceConfig.js相关配置

// ace配置，使用动态加载来避免第一次加载开销
import ace from "ace-builds";

// 导入不同的主题模块，并设置对应 URL
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);

// 导入不同语言的语法模式模块，并设置对应 URL (所有支持的主题和模式：node_modules/ace-builds/src-noconflict)
import modeJsonUrl from "ace-builds/src-noconflict/mode-json?url";
ace.config.setModuleUrl("ace/mode/json", modeJsonUrl);

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 modePythonUrl from "ace-builds/src-noconflict/mode-python?url";
ace.config.setModuleUrl("ace/mode/yaml", modePythonUrl);

// 用于完成语法检查、代码提示、自动补全等代码编辑功能，必须注册模块 ace/mode/lang _ worker，并设置选项 useWorker: true
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"; // for vite
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 snippetsJsonUrl from "ace-builds/src-noconflict/snippets/json?url";
ace.config.setModuleUrl("ace/snippets/json", snippetsJsonUrl);

import snippetsJsUrl from "ace-builds/src-noconflict/snippets/javascript?url";
ace.config.setModuleUrl("ace/snippets/javascript", snippetsJsUrl);

import snippetsHtmlUrl from "ace-builds/src-noconflict/snippets/html?url";
ace.config.setModuleUrl("ace/snippets/html", snippetsHtmlUrl);

import snippetsPyhontUrl from "ace-builds/src-noconflict/snippets/python?url";
ace.config.setModuleUrl("ace/snippets/javascript", snippetsPyhontUrl);

// 启用自动补全等高级编辑支持，
import extSearchboxUrl from "ace-builds/src-noconflict/ext-searchbox?url";
ace.config.setModuleUrl("ace/ext/searchbox", extSearchboxUrl);

// 启用自动补全等高级编辑支持
import "ace-builds/src-noconflict/ext-language_tools";
ace.require("ace/ext/language_tools");

最终页面实现效果