vue3插件:ace-builds封装ace-editor

安装包

复制代码
npm install ace-builds --save-dev
//引入ace报错需要安装
npm install vue-loader-v16 -D

封装文件

ace-editor相关文档参考

webpack环境必备:import "ace-builds/webpack-resolver";

非webpack环境不需要引入

html 复制代码
<template>
  <div ref="editorform" style="height: 300px" class="ace-editor"></div>
</template>
<script>
import { watch, onMounted, onBeforeUnmount, ref} from "vue";
import ace from "ace-builds";
import "ace-builds/webpack-resolver";
import "ace-builds/src-noconflict/mode-yaml";
import "ace-builds/src-noconflict/theme-chaos";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/ext-emmet";
import "ace-builds/src-noconflict/snippets/yaml";
//import "ace-builds/src-noconflict/keybinding-vscode";
//import "ace-builds/src-noconflict/keybinding-emacs";
export default {
  name: "CodeEditor",
  emits: ["update:value"],
  props: {
    id: {
      type: Number,
      default: 0,
    },
    // 外部传入的内容,用于实现双向绑定
    value: {
      type: String,
      default: "",
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    // 外部传入的语法类型
    language: {
      type: String,
      default: "yaml",
    },
    // 编辑器主题色
    theme: {
      type: String,
      default: "chaos",
    },
  },
  setup(props, { emit }) {
    let editor = null;
    const editorform = ref(null);
    let options = {
      theme: "ace/theme/" + (props.theme ? props.theme : "chaos"),
      mode: "ace/mode/" + (props.language ? props.language : "yaml"),
      tabSize: 2,
      maxLines: 25,
      minLines: 25,
      showPrintMargin: false,
      fontSize: 14,
      readOnly: props.readonly ? props.readonly : false,
    };
    //切换语言
    //editor.getSession().setMode(modelPath)

    function initialize() {
      if (editor) {
        //实例销毁
        editor.destroy();
      }
      //初始化
      editor = ace.edit(editorform.value, options);
      //代码提示和自动补全
      editor.setOptions({
        enableSnippets: true,
        enableLiveAutocompletion: true,
        enableBasicAutocompletion: true,
      });
      editor.getSession().setUseWrapMode(true);
      // 支持双向绑定
      editor.on("change", () => {
        if (emit) {
          emit("update:value", editor.getValue());
        }
      });
       //快捷键
      editor.commands.addCommand({
        name: 'formatter',
        bindKey: { win: 'Ctrl-Shift-F', mac: 'Command-Shift-F' },
        exec: () => emit('formatter', editor)
      })
      editor.setValue(props.value ? props.value : "");
    }
    watch(
      () => props.id,
      () => {
        initialize();
      }
    );
    watch(
      () => props.value,
      (newProps) => {
        //解决光标移动问题
        const position = editor.getCursorPosition();
        editor.getSession().setValue(newProps);
        editor.clearSelection();
        editor.moveCursorToPosition(position);
      }
    );
    onMounted(() => {
      initialize();
    });
    onBeforeUnmount(() => {
      editor.destroy();
    });
    return {
      editorform,
    };
  },
};
</script>
<style lang="scss" scoped>
    .ace-chaos .ace_meta.ace_tag{
        color:#53a7e6 !important;
    }
    .ace-chaos .ace_string{
        color:#c58854 !important;
    }
    .ace-chaos .ace_keyword{
        color:#e0e0e0 !important;
    }
    .ace-chaos .ace_constant.ace_numeric{
        color:#c5c454 !important;
    }
</style>

###页面使用

html 复制代码
<!--解决视图更新问题-->
<!--@update:value="cmadd.value = $event"-->
<template>
<div>
  <code-editor
        ref="addcodeform"
        v-model:value="cmadd.value"
        v-model:id="cmadd.id"
        @update:value="cmadd.value = $event"
      ></code-editor>
</div>
</template>
<script>
import {ref} from "vue";
import CodeEditor from "@/components/AceEditor";
export default {
  components:{CodeEditor},
  setup(){
    const cmadd=ref({value:"",id:0});
    return{cmadd}
  }
}
</script>
相关推荐
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD3 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding3 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空3 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
01传说4 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
sunbyte6 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
拾光拾趣录7 小时前
虚拟DOM
前端·vue.js·dom
合作小小程序员小小店7 小时前
web网页,在线%食谱推荐系统%分析系统demo,基于vscode,uniapp,vue,java,jdk,springboot,mysql数据库
vue.js·spring boot·vscode·spring·uni-app