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

已于 2024-05-30 10:51:59 修改
阅读量1k 收藏 4
点赞数 4
文章标签： 编辑器 javascript 前端
于 2024-05-30 10:51:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asbeela/article/details/139317385
版权

下载

安装 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");

后续

Asbeel.
关注
在vue项目中使用codemirror插件实现代码编辑器功能
01-19
在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示），具体内容如下所示： 1、使用npm安装依赖 npm install --save codemirror; 2、在页面中放入如下代码 <template> <textarea ref=mycode class=codesql v-model=code style=height:200px;width:600px;></textarea> </template> [removed] import codemirror/theme/ambiance.css; import codemirr
在vue中使用ace编辑器
08-11
在vue中使用ace编辑器 （https://ace.c9.io/）
使用 Vue3-Ace-Editor 在 Vue3 项目中集成代码编辑器
bighead的博客
08-13 1562
首先，我们需要安装 组件。可以通过 npm 或 yarn 安装它。 安装完成后，Ace Editor 还需要相关的语言包和主题包。可以根据项目需求选择安装。 二、在 Vue 组件中引入和使用 接下来，我们将在一个 Vue 组件中使用 。首先，引入并注册组件。 在上述代码中，我们完成了 的基本配置和使用： 2. 设置编辑器的内容，并可以选择是否将光标移动到新内容的末尾。 可选，设置为 时，光标移动到文本末尾。 3. 获取当前编辑器的内容。 4. 使编辑器获得焦点。 5. cl
vue3-ace-editor使用记录
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
03-14 3511
主要记录了在vue3项目中使用vue3-ace-editor及相关配置说明。
好用的代码编辑器 vue3
qq_42112454的博客
07-04 635
【代码】好用的代码编辑器 vue3。
花两周的时间用electron、vue3做了一个简易的代码编辑器
weixin_39634815的博客
09-22 743
electron、vue3、typescript、electron-plus、fs、编辑器
富文本编辑器vue2-editor实现全屏功能
10-16
本文讲述的是如何在使用vue2-editor作为基础的富文本编辑器中实现全屏功能。vue2-editor本身是基于Quill编辑器的一个封装，它并没有直接提供全屏功能，因此需要我们自己来实现。以下我们将详细地探讨如何在vue2-...
vue+vue2-ace-editor 代码编辑器支持groovy语言及自定义代码提示
weixin_43881166的博客
08-06 2439
vue+vue2-ace-editor 代码编辑器支持groovy语言及自定义代码提示 效果如图所示 安装 npm install --save-dev vue2-ace-editor 代码如下 自定义代码提示部分符号不支持比如= +等 <template> <div class="container"> <editor v-model="content" ref="aceEditor" @init="editorInit" lang="gro
aceEditor代码编辑器api
09-13
AceEditor是一款广受欢迎的前端代码编辑器，以其高性能和丰富的API功能著称。这款编辑器支持多种编程语言的代码高亮显示，适用于构建在线代码编辑器、开发者工具或任何需要文本编辑功能的Web应用。在官方文档无法...
ace-editor代码编辑器实现与如何格式化编辑器中的代码(支持SQL/Java/JS/CSS/HTML/JSON/XML)
张音乐的博客
10-24 2645
效果图展示,只展示了SQL和JAVA代码的格式化 ,其他的 JS/CSS/HTML/JSON/XML 也都支持 需要引入依赖 /** 代码编辑器 **/ cnpm install --save vue2-ace-editor /** sql格式刷 **/ cnpm install --save sql-formatter@2.3.3 /** CSS / JS /JAVA /JSON /HTML/ XML格式刷 **/ cnpm install --save beautify <te.
Vue-Code-Editor
03-14
巴卡拉拉卡 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
vue-quill:Vue 3组件的笔管编辑器
03-21
VueQuill 强大的文本编辑器的Vue 3 + Quill Component。 概述 VueQuill是用于构建富文本编辑器的Vue组件，此软件包是Quill的一个薄包装，使它在Vue 3应用程序中更易于使用。 :green_heart:使用Vue 3构建：比以前更强大，更高效的框架。 :male_sign:‍:male_sign:完全打字稿： VueQuill源代码完全用打字稿编写。 :hammer_and_wrench:易于使用：通过一个简单的API即可直接实现。 演示版 。 文献资料 贡献 拉请求是受欢迎的。对于重大更改，请首先针对您要更改的内容进行。 鹅毛笔 执照
ace editor，在线代码编辑器
09-03
aceeditor是一款不错的语法着色在线编辑器，使用js创建，支持40多种常见语言，最初接触是因为liferay的aui团队使用了，我想提取出来，看了源码发现是另外一个叫ace的，没事就找了找，打包分享出来
VueEditor:在线运行Vue代码的编辑器
03-27
Vue编辑器 一个可以运行Vue代码的编辑器，CSS支持Less，Sass / Scss，Stylus 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build
vue3+ts 使用vue3-ace-editor实现Json编辑器
x_nweBorder01k的博客
06-19 1037
vue3+ts 使用vue3-ace-editor实现Json编辑器
在vue3中ace-editor的简单使用
youhebuke225的博客
02-26 4374
ace-editor。
Vue 中引用 ace-editor
bluthly的博客
11-22 9527
1.先在官网下载源码https://github.com/ajaxorg/ace，在本地运行一下命令 npm install node ./Makefile.dryice.js 2.copy build文件夹到项目中 3.在vue的index.html里引用js &lt;script src="static/js/ace-editor/src/ace.js"&gt;&lt;/scrip...
Vue3中使用Monaco Editor代码编辑器记录——主动触发代码补全功能（python和sql为例）～持续更新
sebeefe的博客
07-31 3263
先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。虽然是一个数组，可以写多个字符，但是它只能识别数组里面的第一个字符，然后出现代码提示。然后我按照这个例子进行了修改，实现了简单的代码自动补全。.
vue3-ace-editor插件如何支持python语法？
最新发布
09-10
要让vue3-ace-editor插件支持Python语法，你需要按照以下步骤进行操作： 1. 安装`vue3-ace-editor`插件。如果你还没有安装这个插件，可以通过npm或yarn来安装它。使用npm的命令如下： ```bash npm install --save vue3-ace-editor ``` 2. 引入`vue3-ace-editor`并在你的组件中使用。在你的Vue组件中，你需要引入`vue3-ace-editor`，并将其添加到组件的`components`选项中。 3. 配置编辑器以使用Python模式。`vue3-ace-editor`使用ace-builds作为底层编辑器，所以你需要引入Python模式的语法定义。在你的组件的`mounted`或`onMounted`生命周期钩子中，你可以使用ace-builds的`require`方法来动态加载Python语言的语法文件。例如： ```javascript import { ref, onMounted } from 'vue'; import ace from 'vue3-ace-editor'; import 'ace-builds/src-noconflict/mode-python'; import 'ace-builds/src-noconflict/theme-monokai'; export default { components: { ace }, setup() { const editor = ref(null); onMounted(() => { editor.value.editor.session.setMode("ace/mode/python"); editor.value.editor.setTheme("ace/theme/monokai"); }); return { editor }; } }; ``` 4. 在模板中使用`<ace-editor>`。在你的组件模板中，现在可以添加`<ace-editor>`并使用之前配置好的`editor`引用。例如： ```html <template> <div> <ace-editor ref="editor" width="800px" height="600px" @init="onInit" /> </div> </template> ``` 通过以上步骤，你就可以在vue3项目中使用vue3-ace-editor插件并且配置支持Python语法了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值