在vue3中ace-editor的简单使用
Vue3 简单 Editor ACE 使用
2023-09-11 14:19:18 时间
专栏目录请点击
简介
- 官网
ace-editor
是一种代码编辑器
安装
- 首先我们下载编辑器,当然我们也可以使用npm进行下载
yarn add vue3-ace-editor
- 我们在vue3中写上如下代码
<script setup lang="ts">
import { ref } from "vue";
import { VAceEditor } from "vue3-ace-editor"
const content = ref("<div>Hello World</div>")
</script>
<template>
<v-ace-editor v-model:value="content" lang="html" theme="github" style="height: 300px" />
</template>
- 这个时候代码编辑器就显示出来了
深入
- 但是我们会发现这时候主题和高亮似乎没有生效,编辑器的主题也没有生效
- 这个时候我们新建一个文件
ace.config.ts
,写上如下代码
import ace from 'ace-builds';
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 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 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");
写完之后,我们在使用的地方引入一下当前的配置文件便可
import '../../ace.config';
相关文章
- Vue3 getters打印结果是Proxy对象,怎么获取其中的值?
- vue3-巧用指令
- 怎样安装vue2和vue3的Vue.js devtools
- Vue3快速上手资料!手把手带你彻底学会Vue3,超详细讲解!不怕学不会!【建议收藏】【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通vue3笔记资料】
- 初始化创建安装 vue3工程项目的3种方法!超详细
- vue3 - 在单独的项目制作自定义组件插件,支持vite【前提不要使用webpack专属语法】,并引入插件 -心得
- vue3 - .eslintignore 配置忽略指定文件或者文件夹的eslint检查报错
- vue3中 toRefs和 toRef 的区别
- Vue3学习笔记(四)——组件、插槽、生命周期、Hooks
- 从0搭建Vue3组件库(四): 如何开发一个组件
- Vue3入门笔记自用
- vue2和vue3有哪些区别和不同1
- 学习vue3系列生命周期
- Vue3 reactive / customRef 快速理解掌握