vue3使用ace-builds在线编辑器

@野原新之助23

已于 2024-06-20 08:53:40 修改

阅读量849

点赞数 2

文章标签：编辑器 vue 前端

于 2024-06-19 10:27:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_65079752/article/details/139776310

版权

引入依赖

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&