vue3 + vite中按需使用ace-builds实现编辑器
vue3中按需使用ace-builds在页面中实现编辑器
·
1.介绍
本文中只使用ace-builds中src下的个别文件完成功能
githab官网：https://github.com/ajaxorg/ace-builds/tree/master
在线demo：https://ace.c9.io/build/kitchen-sink.html
2.需求描述
运维人员可以在前台中查看后台接口、实例等的运行日志，希望可以在左侧显示日志的条数。
3. 使用ace-builds
1.通过npm
通过使用npm安装ace-builds发现包过于庞大(打完包后发现ace-builds中占了2mb)，很多不需要的主题和代码结构会占包中的很大一部分，但是ace-builds对于包没有提供拆分功能。
需求中很明白只需要很小一部分功能，所以可以下载到本地按需引入。
2.通过静态资源引入
通过下载github上的ace.js，完成编辑器的初始化等(注意：需要下载的是打包后版本的ace.js)
该目录下的ace.js
在需要初始化编辑器的地方引入import "@/assets/js/ace/ace"不需要使用任何表达式接收。
由于ace.js中使用的是UMD通用模块定义，会将实例自动挂接到当前上下文环境。
对于主题和代码匹配模式来说也是一样
在需要初始化编辑器的地方引入import "import "@/assets/js/ace/theme-dracula""不需要使用任何表达式接收。
3.实现效果
实现需求的代码
<template>
<div class="app-container">
<!-- 日志内容 -->
<div id="log-content"></div>
</div>
</template>
<script setup>
import "@/assets/js/ace/ace"
import "@/assets/js/ace/theme-dracula"
let editor = null // ace加载实例
onActivated(() => {
editor = ace.edit("log-content");
// 使用dracula主题
editor.setTheme("ace/theme/dracula");
editor.setOptions({
// 只读
readOnly: true,
// 启用滚动
autoScrollEditorIntoView: true,
// 启用换行
wrap: true,
fontSize: '15px',
// 启用自动滚动到底部 0, 0.5, and 1
scrollPastEnd: 0,
// 显示参考线
displayIndentGuides: false
})
getList();
if (document.querySelector('.ace_scrollbar-v')) {
// 隐藏滚动条
document.querySelector('.ace_scrollbar-v').className = document.querySelector('.ace_scrollbar-v').className + 'display-scrollbar'
}
})
// 查询日志列表
function getList() {
editor.setValue(`htto no TOOs
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8] ComoositeCantroller java.updateComposite:37)- 开始更新服务组合
2021-08-0611:23:352021-08-06 11:23:35 WAR WARN[platform platform undetine undefined undefine nitp-nio-7702-exec-8 http-nio-7702-exec-8 CompositeNodejeva.init:94)(CompositeNodejava.init:94)-服务书点flow-ele-end中服务列表为空服务书点flow-ele-start中服务列表为空
4 2021-08-0611:23:35 WARN oiatfor htto-n0-7702-ex6c-8 (CompositeManager.javn deleteComoosite:102)-环境中没有服务组合名Add sub 01，不需要进行删的
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8) (CompositeManeger.java.addCompoaite.87)-新增服务组合Add_sub 01完成
2021-08-06 11:23:35 DNFO piatforrm undefined http-nio-7702-ex0c-81 CompositeManager.jave.addComposite:87)-新增服务相合Add_sub 01完成
7 2021-08-0611:24:10 INFO pintfom undefinee htto-nio-7702-exac-10 ComoositeControllerjevs.odateComoosite:37)开始面新 组台
8 2021-08-0611:24:10 INFO platform undefined http-ni0-7702-ecec-10 CompositeCantroller.isva.uodstec Composite:37)-开始更新服务组台
2021-08
htto no TOOs
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8] ComoositeCantroller java.updateComposite:37)- 开始更新服务组合
2021-08-0611:23:352021-08-06 11:23:35 WAR WARN[platform platform undetine undefined undefine nitp-nio-7702-exec-8 http-nio-7702-exec-8 CompositeNodejeva.init:94)(CompositeNodejava.init:94)-服务书点flow-ele-end中服务列表为空服务书点flow-ele-start中服务列表为空
4 2021-08-0611:23:35 WARN oiatfor htto-n0-7702-ex6c-8 (CompositeManager.javn deleteComoosite:102)-环境中没有服务组合名Add sub 01，不需要进行删的
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8) (CompositeManeger.java.addCompoaite.87)-新增服务组合Add_sub 01完成
2021-08-06 11:23:35 DNFO piatforrm undefined http-nio-7702-ex0c-81 CompositeManager.jave.addComposite:87)-新增服务相合Add_sub 01完成
7 2021-08-0611:24:10 INFO pintfom undefinee htto-nio-7702-exac-10 ComoositeControllerjevs.odateComoosite:37)开始面新 组台
8 2021-08-0611:24:10 INFO platform undefined http-ni0-7702-ecec-10 CompositeCantroller.isva.uodstec Composite:37)-开始更新服务组台
2021-08
htto no TOOs
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8] ComoositeCantroller java.updateComposite:37)- 开始更新服务组合
2021-08-0611:23:352021-08-06 11:23:35 WAR WARN[platform platform undetine undefined undefine nitp-nio-7702-exec-8 http-nio-7702-exec-8 CompositeNodejeva.init:94)(CompositeNodejava.init:94)-服务书点flow-ele-end中服务列表为空服务书点flow-ele-start中服务列表为空
4 2021-08-0611:23:35 WARN oiatfor htto-n0-7702-ex6c-8 (CompositeManager.javn deleteComoosite:102)-环境中没有服务组合名Add sub 01，不需要进行删的
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8) (CompositeManeger.java.addCompoaite.87)-新增服务组合Add_sub 01完成
2021-08-06 11:23:35 DNFO piatforrm undefined http-nio-7702-ex0c-81 CompositeManager.jave.addComposite:87)-新增服务相合Add_sub 01完成
7 2021-08-0611:24:10 INFO pintfom undefinee htto-nio-7702-exac-10 ComoositeControllerjevs.odateComoosite:37)开始面新 组台
8 2021-08-0611:24:10 INFO platform undefined http-ni0-7702-ecec-10 CompositeCantroller.isva.uodstec Composite:37)-开始更新服务组台
2021-08htto no TOOs
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8] ComoositeCantroller java.updateComposite:37)- 开始更新服务组合
2021-08-0611:23:352021-08-06 11:23:35 WAR WARN[platform platform undetine undefined undefine nitp-nio-7702-exec-8 http-nio-7702-exec-8 CompositeNodejeva.init:94)(CompositeNodejava.init:94)-服务书点flow-ele-end中服务列表为空服务书点flow-ele-start中服务列表为空
4 2021-08-0611:23:35 WARN oiatfor htto-n0-7702-ex6c-8 (CompositeManager.javn deleteComoosite:102)-环境中没有服务组合名Add sub 01，不需要进行删的
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8) (CompositeManeger.java.addCompoaite.87)-新增服务组合Add_sub 01完成
2021-08-06 11:23:35 DNFO piatforrm undefined http-nio-7702-ex0c-81 CompositeManager.jave.addComposite:87)-新增服务相合Add_sub 01完成
7 2021-08-0611:24:10 INFO pintfom undefinee htto-nio-7702-exac-10 ComoositeControllerjevs.odateComoosite:37)开始面新 组台
8 2021-08-0611:24:10 INFO platform undefined http-ni0-7702-ecec-10 CompositeCantroller.isva.uodstec Composite:37)-开始更新服务组台
2021-08
htto no TOOs
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8] ComoositeCantroller java.updateComposite:37)- 开始更新服务组合
2021-08-0611:23:352021-08-06 11:23:35 WAR WARN[platform platform undetine undefined undefine nitp-nio-7702-exec-8 http-nio-7702-exec-8 CompositeNodejeva.init:94)(CompositeNodejava.init:94)-服务书点flow-ele-end中服务列表为空服务书点flow-ele-start中服务列表为空
4 2021-08-0611:23:35 WARN oiatfor htto-n0-7702-ex6c-8 (CompositeManager.javn deleteComoosite:102)-环境中没有服务组合名Add sub 01，不需要进行删的
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8) (CompositeManeger.java.addCompoaite.87)-新增服务组合Add_sub 01完成
2021-08-06 11:23:35 DNFO piatforrm undefined http-nio-7702-ex0c-81 CompositeManager.jave.addComposite:87)-新增服务相合Add_sub 01完成
7 2021-08-0611:24:10 INFO pintfom undefinee htto-nio-7702-exac-10 ComoositeControllerjevs.odateComoosite:37)开始面新 组台
8 2021-08-0611:24:10 INFO platform undefined http-ni0-7702-ecec-10 CompositeCantroller.isva.uodstec Composite:37)-开始更新服务组台
2021-08
htto no TOOs
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8] ComoositeCantroller java.updateComposite:37)- 开始更新服务组合
2021-08-0611:23:352021-08-06 11:23:35 WAR WARN[platform platform undetine undefined undefine nitp-nio-7702-exec-8 http-nio-7702-exec-8 CompositeNodejeva.init:94)(CompositeNodejava.init:94)-服务书点flow-ele-end中服务列表为空服务书点flow-ele-start中服务列表为空
4 2021-08-0611:23:35 WARN oiatfor htto-n0-7702-ex6c-8 (CompositeManager.javn deleteComoosite:102)-环境中没有服务组合名Add sub 01，不需要进行删的
2021-08-0611:23:35 INFO platform undefined http-nio-7702-exec-8) (CompositeManeger.java.addCompoaite.87)-新增服务组合Add_sub 01完成
2021-08-06 11:23:35 DNFO piatforrm undefined http-nio-7702-ex0c-81 CompositeManager.jave.addComposite:87)-新增服务相合Add_sub 01完成
7 2021-08-0611:24:10 INFO pintfom undefinee htto-nio-7702-exac-10 ComoositeControllerjevs.odateComoosite:37)开始面新 组台
8 2021-08-0611:24:10 INFO platform undefined http-ni0-7702-ecec-10 CompositeCantroller.isva.uodstec Composite:37)-开始更新服务组台
2021-08`);
nextTick(() => {
// 光标跳转到几行几列 清楚设置内容后自动选中的效果
editor.gotoLine(editor.session.getLength());
})
}
</script>
<style lang="scss" scoped>
.app-container {
#log-content {
width: 100%;
height: 70vh;
.display-scrollbar {
display: none;
}
}
}
</style>
关于ace的setOptions配置https://github.com/ajaxorg/ace/wiki/Configuring-Ace
中文对照
| 选项名 | 值类型 | 默认 | 可选值 | 功能 |
|---|---|---|---|---|
| selectionStyle | String | text | line|text | 选中样式 |
| highlightActiveLine | Boolean | true | - | 高亮当前行 |
| highlightSelectedWord | Boolean | true | - | 高亮选中文本 |
| readOnly | Boolean | false | - | 是否只读 |
| cursorStyle | String | ace | ace|slim|smooth|wide | 光标样式 |
| mergeUndoDeltas | String|Boolean | false | always | 合并撤销 |
| behavioursEnabled | Boolean | true | - | 启用行为 |
| wrapBehavioursEnabled | Boolean | true | - | 启用换行 |
| autoScrollEditorIntoView | Boolean | false | - | 启用滚动 |
| copyWithEmptySelection | Boolean | true | - | 复制空格 |
| useSoftTabs | Boolean | false | - | 使用软标签 |
| navigateWithinSoftTabs | Boolean | false | - | 软标签跳转 |
| enableMultiselect | Boolean | false | - | 选中多处 |
| hScrollBarAlwaysVisible | Boolean | false | - | 纵向滚动条始终可见 |
| vScrollBarAlwaysVisible | Boolean | false | - | 横向滚动条始终可见 |
| highlightGutterLine | Boolean | true | - | 高亮边线 |
| animatedScroll | Boolean | false | - | 滚动动画 |
| showInvisibles | Boolean | false | - | 显示不可见字符 |
| showPrintMargin | Boolean | false | - | 显示打印边距 |
| printMarginColumn | Number | 80 | - | 设置页边距 |
| printMargin | Boolean|Number | false | - | 显示并设置页边距 |
| fadeFoldWidgets | Boolean | false | - | 淡入折叠部件 |
| showFoldWidgets | Boolean | true | - | 显示折叠部件 |
| showLineNumbers | Boolean | true | - | 显示行号 |
| showGutter | Boolean | true | - | 显示行号区域 |
| displayIndentGuides | Boolean | true | - | 显示参考线 |
| fontSize | Number|String | inherit | - | 设置字号 |
| fontFamily | String | inherit | 设置字体 | |
| maxLines | Number | - | - | 至多行数 |
| minLines | Number | - | - | 至少行数 |
| scrollPastEnd | Boolean|Number | 0 | - | 滚动位置 |
| fixedWidthGutter | Boolean | false | - | 固定行号区域宽度 |
| theme | String | - | - | 主题引用路径，例如"ace/theme/textmate" |
| scrollSpeed | Number | - | - | 滚动速度 |
| dragDelay | Number | - | - | 拖拽延时 |
| dragEnabled | Boolean | true | - | 是否启用拖动 |
| focusTimout | Number | - | - | 聚焦超时 |
| tooltipFollowsMouse | Boolean | false | - | 鼠标提示 |
| firstLineNumber | Number | 1 | - | 起始行号 |
| overwrite | Boolean | - | - | 重做 |
| newLineMode | String | auto | auto|unix|windows | 新开行模式 |
| useWorker | Boolean | - | - | 使用辅助对象 |
| useSoftTabs | Boolean | - | - | 使用软标签 |
| tabSize | Number | - | - | 标签大小 |
| wrap | Boolean | - | - | 换行 |
| foldStyle | String | - | markbegin|markbeginend|manual | 折叠样式 |
| mode | String | - | - | 代码匹配模式，例如“ace/mode/text" |
| enableBasicAutocompletion | Boolean | - | - | 启用基本自动完成 |
| enableLiveAutocompletion | Boolean | - | - | 启用实时自动完成 |
| enableSnippets | Boolean | - | - | 启用代码段 |
| enableEmmet | Boolean | - | - | 启用Emmet |
| useElasticTabstops | Boolean | - | - | 使用弹性制表位 |
4.ace-editor修改滚动条样式
直接设置编辑器容器无法改动滚动条样式，深度监听ace生成的ace_scrollbar类名
// 设置编辑器的滚动条样式
:deep(.ace_scrollbar)::-webkit-scrollbar {
height: 7px;
width: 7px;
}
:deep(.ace_scrollbar)::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: #272822; /* Matches ace monokai */
border-radius: 10px;
}
:deep(.ace_scrollbar)::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
border-radius: 10px;
}
监听编辑器的任何更改可查看https://ajaxorg.github.io/ace-api-docs/classes/Ace.EditSession.html#on
还有什么疑问请查看aceAPi文档https://ace.c9.io/
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)