基于monaco-editor的web日志组件

news2024/11/24 11:58:55

基于monaco-editor封装的编辑器，支持如下功能：

日志内容颜色配置：info、primary、success、warning、error
支持主题配置：dark、light
支持滚动到顶部、底部、全屏
编辑器默认带的全局搜索
扩展性强，支持monaco的所有配置
支持vue和react

1.安装

npm install web-log-view

2. 使用

import LogView from 'web-log-view';

let view = LogView.create(document.getElementById('log-editor'), {
    theme: {
        base: 'dark' // dark, light
    },
    tokenProvider: {
        error: /^Error:.*/
    }
});
view.updateLog(str);

<div id="log-editor"></div>

3.配置

//使用方式
LogView.create(dom, options)
// options
支持三类配置
1. theme
// 当前支持base 可选项位dark和light
2. tokenProvider
支持配置 error、success、primary、info、warning，配置对应的正则表达式，匹配日志内容
3.monaco-editor的create options

4.例子

在vue中使用的例子：

<script setup lang="ts">
import WebLogView from 'web-log-view';
import {nextTick, onMounted, ref} from 'vue';

const show = ref(false);
const logView = ref(null);
const logStr = `
API: SYSTEM()
Time: 07:37:55 UTC 09/29/2024
DeploymentID: d7578a02-49c0-41c6-8db0-c89347eabdb7
Error: Marking minio-1.minio-headless.svc.cluster.local:9000 offline temporarily; caused by Post "http://minio-1.minio-headless.svc.cluster.local:9000/minio/peer/v30/localstorageinfo": lookup minio-1.minio-headless.tianniu.svc.cluster.local on 169.254.25.10:53: no such host (*fmt.wrapError)
       7: internal/logger/logonce.go:118:logger.(*logOnceType).logOnceIf()
       6: internal/logger/logonce.go:149:logger.LogOnceIf()
       5: internal/rest/client.go:324:rest.(*Client).Call()
       4: cmd/peer-rest-client.go:68:cmd.(*peerRESTClient).callWithContext()
       3: cmd/peer-rest-client.go:53:cmd.(*peerRESTClient).call()
       2: cmd/peer-rest-client.go:106:cmd.(*peerRESTClient).LocalStorageInfo()
       1: cmd/notification.go:916:cmd.(*NotificationSys).StorageInfo.func1()
Use `mc admin info` to look for latest server/drive info
 Status:         12 Online, 12 Offline. `;

onMounted(() => {
    let view = WebLogView.create(logView.value, {
        value: 'Error: 123',
        tokenProvider: {
            error: /^Error:.*/
        }
    });
    view.updateLog(logStr);

});
</script>

<template>
    <div id="log-editor" ref="logView"></div>
</template>

<style scoped>
    #log-editor {
        width: 100%;
        height: 100%;
    }
</style>