Редактор ACE, добавляющий специальные символы - PullRequest
Новая
       36

Редактор ACE, добавляющий специальные символы

0 голосов
/ 16 апреля 2020

Вариант использования - отображение журналов сервера в пользовательском интерфейсе, построенном с использованием Angular9. Я использую редактор ACE для отображения текстового содержимого, полученного с сервера при вызове http, и сервер отвечает последними 1000 строками журналов. Для проверки содержимого я выполнил console.log () для просмотра текстового содержимого в инструменте chrome dev. Вывод на консоль, полученный от сервера

При загрузке того же содержимого в редактор я замечаю специальные символы

Содержимое редактора Ace при использовании в текстовом режиме

Прикрепленный 2 скриншот для сравнения

HTML Содержание 

  <div ace-editor #codeEditor style="min-height: 550px; width:100%; overflow: auto;"></div>

Машинопись 

import { Component, ViewChild, ElementRef, Input, SimpleChanges } from '@angular/core';

import * as ace from 'ace-builds';
import 'ace-builds/src-noconflict/mode-json';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/ext-beautify';

const THEME = 'ace/theme/github';
const LANG = 'ace/mode/text';

@Component({
  selector: 'app-text-editor',
  templateUrl: './text-editor.component.html',
  styleUrls: ['./text-editor.component.css']
})
export class TextEditorComponent {
  @ViewChild('codeEditor') codeEditorElmRef: ElementRef;
  private codeEditor: ace.Ace.Editor;

  @Input() textObject;
  @Input() readMode;

  data: any;
  mode: any;

  constructor() { }

  ngOnChanges(changes: SimpleChanges) {
    for (const properties of Object.keys(changes)) {
      if (properties == 'textObject') {
        const currentJSONObject = changes[properties];
        if (currentJSONObject.currentValue && currentJSONObject.firstChange == false)
          this.codeEditor.setValue(currentJSONObject.currentValue, -1);
        else
          this.data = currentJSONObject.currentValue
      }
      if (properties == 'readMode') {
        const currentReadMode = changes[properties];
        if (currentReadMode.firstChange == false)
          this.codeEditor.setReadOnly(currentReadMode.currentValue);
        else
          this.mode = currentReadMode.currentValue
      }
    }
  }

  ngAfterViewInit() {
    const element = this.codeEditorElmRef.nativeElement;
    const editorOptions: Partial<ace.Ace.EditorOptions> = {
      highlightActiveLine: true,
      displayIndentGuides: true,
      highlightSelectedWord: true,
    };
    this.codeEditor = ace.edit(element, editorOptions);
    this.codeEditor.setTheme(THEME);
    this.codeEditor.getSession().setMode(LANG);
    this.codeEditor.setShowFoldWidgets(true);
    this.codeEditor.setHighlightActiveLine(true);
    this.codeEditor.setShowPrintMargin(false);
    this.codeEditor.setReadOnly(this.readMode);
    this.codeEditor.navigateFileEnd();
    if (this.data)
      this.codeEditor.setValue(this.data, - 1);
    if (this.mode)
      this.codeEditor.setReadOnly(this.mode);
  }
}

1 Ответ

0 голосов
/ 16 апреля 2020

Это не символы, добавленные тузом, а символы управления цветом, отправленные терминалом. Если вы не хотите отображать цвета и хотите только текст, используйте следующую функцию 

var CSIRegexp;
function getCSIRegexp() {
  if (CSIRegexp) return CSIRegexp; 
  // http://www.inwap.com/pdp10/ansicode.txt

  var classes = {
    C0              :  "\\x00-\\x1F", //
    SPACE           :  "\\x20\\xA0" , // Always and everywhere a blank space
    G0              :  "\\x21-\\x7E", //
    Intermediate    :  "\\x20-\\x2F", //  !"#$%&'()*+,-./
    Parameters      :  "\\x30-\\x3F", // 0123456789:;<=>?
    Uppercase       :  "\\x40-\\x5F", // @ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
    Lowercase       :  "\\x60-\\x7E", // `abcdefghijlkmnopqrstuvwxyz{|}~
    Alphabetic      :  "\\x40-\\x7E", // (all of upper and lower case)
    Delete          :  "\\x7F"      , // Always and everywhere ignored
    C1              :  "\\x80-\\x9F", // 32 additional control characters
    G1              :  "\\xA1-\\xFE", // 94 additional displayable characters
    Special         :  "\\xA0\\xFF" , // Same as SPACE and DELETE
    ESC             :  "\\x1b"      , // 
    Ignore          :  "\\x7F\\x00-\\x1F\\x80-\\x9F" // Delete|C0|C1
  };


  var g = /:ESC:(\[:Parameters:*:Intermediate:?:Alphabetic:?|:Intermediate:+:Parameters:|:Parameters:|:Lowercase:|)|[:Ignore:]/;

  var inBrackets = false;
  var source = g.source.replace(/(\\.)|([\[\]])|:(\w*):/g, function(_, esc, b, cls) {
    if (esc) return esc;
    if (b) {
      inBrackets = b == "[";
      return b;
    }
    if (!cls) return ":";
    var r = classes[cls];
    if (!/ESC|Delete|C0|C1/.test(cls)) {
      r += classes.Ignore;
    }
    if (!inBrackets && cls != "ESC")
      r = "[" + r + "]";
    return r;
  });

  return CSIRegexp = new RegExp(source, "g");
}

, чтобы удалить управляющий символ перед установкой данных в редакторе 

 this.codeEditor.setValue(this.data.replace(getCSIRegexp(), ""), - 1);

Вы можете проверить это со следующим звонком: 

"\x1b[1mreal text\x1b[10m".replace(getCSIRegexp(), "")
...