vue3 + vite中按需使用ace-builds实现编辑器

已于 2022-10-08 14:34:33 修改
阅读量9.4k 收藏 18
点赞数 2
分类专栏： js vue3 文章标签： vue ace ace-builds
于 2022-09-15 16:59:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45532305/article/details/126871801
版权

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

中文对照

选项名值类型默认可选值功能
selectionStyleStringtextline|text选中样式
highlightActiveLineBooleantrue-高亮当前行
highlightSelectedWordBooleantrue-高亮选中文本
readOnlyBooleanfalse-是否只读
cursorStyleStringaceace|slim|smooth|wide光标样式
mergeUndoDeltasString|Booleanfalsealways合并撤销
behavioursEnabledBooleantrue-启用行为
wrapBehavioursEnabledBooleantrue-启用换行
autoScrollEditorIntoViewBooleanfalse-启用滚动
copyWithEmptySelectionBooleantrue-复制空格
useSoftTabsBooleanfalse-使用软标签
navigateWithinSoftTabsBooleanfalse-软标签跳转
enableMultiselectBooleanfalse-选中多处
hScrollBarAlwaysVisibleBooleanfalse-纵向滚动条始终可见
vScrollBarAlwaysVisibleBooleanfalse-横向滚动条始终可见
highlightGutterLineBooleantrue-高亮边线
animatedScrollBooleanfalse-滚动动画
showInvisiblesBooleanfalse-显示不可见字符
showPrintMarginBooleanfalse-显示打印边距
printMarginColumnNumber80-设置页边距
printMarginBoolean|Numberfalse-显示并设置页边距
fadeFoldWidgetsBooleanfalse-淡入折叠部件
showFoldWidgetsBooleantrue-显示折叠部件
showLineNumbersBooleantrue-显示行号
showGutterBooleantrue-显示行号区域
displayIndentGuidesBooleantrue-显示参考线
fontSizeNumber|Stringinherit-设置字号
fontFamilyStringinherit设置字体
maxLinesNumber--至多行数
minLinesNumber--至少行数
scrollPastEndBoolean|Number0-滚动位置
fixedWidthGutterBooleanfalse-固定行号区域宽度
themeString--主题引用路径，例如"ace/theme/textmate"
scrollSpeedNumber--滚动速度
dragDelayNumber--拖拽延时
dragEnabledBooleantrue-是否启用拖动
focusTimoutNumber--聚焦超时
tooltipFollowsMouseBooleanfalse-鼠标提示
firstLineNumberNumber1-起始行号
overwriteBoolean--重做
newLineModeStringautoauto|unix|windows新开行模式
useWorkerBoolean--使用辅助对象
useSoftTabsBoolean--使用软标签
tabSizeNumber--标签大小
wrapBoolean--换行
foldStyleString-markbegin|markbeginend|manual折叠样式
modeString--代码匹配模式，例如“ace/mode/text"
enableBasicAutocompletionBoolean--启用基本自动完成
enableLiveAutocompletionBoolean--启用实时自动完成
enableSnippetsBoolean--启用代码段
enableEmmetBoolean--启用Emmet
useElasticTabstopsBoolean--使用弹性制表位

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/

procexp64下载
08-18
可在WIndows上分析程序以及运查看程序的环境变量，
procexp64.exe
01-10
64位procexp，可以用来查看进程的各种信息，比系统的任务管理器好用，广大windows开发者的得力助手！
企业微信双开及三开的方法
热门推荐
weixin_43272164的博客
02-09 7万+
企业微信双开及三开的方法 方法1 ：修改系统注册表，实现双开 方法2 ：使用procexp64.exe，实现三开
procexp64程序管理器
04-13
进程管理器。可以挂线程之类的，用于DR.COM共享的专业软件
procexp64.exe Windows平台进程线程CPU GPU资源监控
08-31
procexp64.exe Windows平台进程线程CPU GPU资源监控
procexp64、进程管理工具
12-25
procexp64怎样用,rocex64是一款进程管理工具。可以方便的对进程进行结束,挂起,新建等操作。十分方便,而且适合于初学者对进程的查看和学习。
Procexp.exe —— 强大的进程管理器
gitblog_06546的博客
10-31 818
Procexp.exe —— 强大的进程管理器 【下载地址】Procexp.exe强大的进程管理器分享 Procexp (Process Explorer) 是一款由CSDN社区高度推荐的增强型任务管理工具，被誉为Windows平台下的进程管理神器。它远远超出了传统任务管理器的能力范畴，提供了一套全面且详细的系统监视解决...
深入解析Procexp.exe：高级进程管理工具
描述部分提到 "Procexp.exe —— 强大的进程管理器"，强调了 Process Explorer 的核心功能。它能够详细显示每个进程的模块、内存地址、句柄、线程、安全权限等信息。用户可以通过 Process Explorer 监控 CPU 和内存...
processanalasisy-procexp2.1.rar
09-14
《进程分析神器——Process Explorer 2.1》 在IT领域，优化系统性能、排查问题是一项重要的任务。本文将深入探讨“processanalasisy-procexp2.1.rar”这一压缩包内包含的Process Explorer 2.1工具，它是一款强大的...
Procexp工具（含32位和64位）
08-06
主要使用的功能： （1）更直观查看进程父子关系，结束指定进程，尤其是存在同名进程时更易识别 （2）看到进程的实时创建、销毁情况 （3）查看进程实时加载模块情况 （经常查看我们的钩子dll是否注入） （4）查看进程内句柄 （检查一些命名内核对象是否创建成功、检查是否存在句柄占用） （5）查看进程的相关属性 （文件路径、位数、版本、命令行等） （6）查看进程的资源占用情况 （CPU、内存） （7）查看进程的线程数、执行情况 （排查一些卡死进程的备用方案） （8）把进程两次运行（一次正常一次异常）的模块和句柄情况输出到文件，进行比对分析 （9）检测各线程耗费的CPU和具体的线程调用堆栈（软件开发调试时经常使用）
procexp.exe
10-26
一个方便查看电脑进程的工具，可疑进程将无处遁形，无需安装，使用方便
procexp进程管理
09-06
procexp 是一个windows下超级好用的进程管理工具，告别原版
深入解析PROCEXP.EXE：源码工具的多维度应用
PROCEXP.EXE很可能是指Windows平台上的一个进程管理器工具。在Windows操作系统中，“进程”是指正在运行的程序，而“进程管理器”或“任务管理器”是一个系统工具，允许用户查看正在运行的进程以及系统资源的使用...
任务管理软件可以查看进程
最新发布
11-12
在本次提供的文件信息中，提到的两个文件名称——procexp_Chn.exe和procexp_Chn64.exe——均指向同一软件的不同版本。这一软件为Process Explorer（进程探查器），是一款由微软公司出品的免费任务管理工具。Process ...
雨林木风工具箱终结版
10-14
procexp.exe——增强的进程管理器，对双进程守护病毒疗效极佳 Procmon.exe——监视本机文件和注册表的变化，用于手工杀毒 SREngLdr.exe——SREng2.6正式版，此为全插件单文件版，卡饭“北方星空”DIY作品 ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值