vue3 + vite中按需使用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 1scrollPastEnd: 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 TOOs2021-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 TOOs2021-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 TOOs2021-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 TOOs2021-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 TOOs2021-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 TOOs2021-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/