CodeMirror Line-Break 不添加行号 - Angular

Question

我正在使用来自 ngx-codemirror 的代码镜像。我想在它适合父级的宽度时拆分线。我找到了一些使用

拆分类似内容的解决方案

lineWrapping: true

和风格

.CodeMirror-wrap pre {
  word-break: break-word;
}

使用这个我可以拆分行，但我也需要显示行号。刚刚拆分的行不显示行号。这是针对我的问题的 stackblitz link：code-mirror-line-break-issue

截图：

请帮我解决这个问题。

Answer 1

使用 Code Mirror 选项这是不可行的，因为这有点违反直觉，很少（曾经？）想要。

就像我在评论中所说的那样，假设有 2 个人在 phone/web 上讨论 code/json 的一部分。如果他们有不同的 windows/screen 大小

，当一个人向另一个人提到行号时，他们将不会看到相同的东西

解决方案

作为技巧，您可以创建自己的代表行号的元素并将它们放在默认行号上。

这里是stackblitz demo

注意：这是一个非常基本的示例。如果您更改代码镜像设置（字体大小、间距等），您可能需要调整 css 或根据这些设置进行更多计算。

component.html

<div class='codeMirrorContainer'>
  <ngx-codemirror
      #codeMirror
      [options]="codeMirrorOptions"
      [(ngModel)]="codeObj"
    ></ngx-codemirror>

<ul class='lineContainer' [style.top.px]="-topPosition">
  <li [style.width.px]='lineWidth' *ngFor="let line of lines">{{line}}</li>
</ul>
</div>

component.css

li
{
  height: 19px;
  list-style: none;
}

.codeMirrorContainer
{
  position:relative;
  overflow: hidden;
}

.lineContainer
{
  position:absolute;
  top:0;
  left:0;
  margin: 0;
    padding: 5px 0 0 0;
  text-align: center;
  
}

::ng-deep .CodeMirror-linenumber
{
  visibility: hidden; /* Hides default line numbers */
}

component.ts

export class AppComponent
{


  @ViewChild('codeMirror') codeMirrorCmpt: CodemirrorComponent;

  private lineHeight: number;
  public lineWidth;

  public topPosition: number;
  public lines = [];

  codeMirrorOptions: any = ....;
  codeObj :any = ...;

  constructor(private cdr: ChangeDetectorRef)
  {
  }



  ngAfterViewInit()
  {
    this.codeMirrorCmpt.codeMirror.on('refresh', () => this.refreshLines());
    this.codeMirrorCmpt.codeMirror.on('scroll', () => this.refreshLines());
    setTimeout(() => this.refreshLines(), 500)

  }


  refreshLines()
  {
    let editor = this.codeMirrorCmpt.codeMirror;
    let height = editor.doc.height;
    this.lineHeight = editor.display.cachedTextHeight ? editor.display.cachedTextHeight : this.lineHeight;
    if (!this.lineHeight)
    {
      return;
    }
    let nbLines = Math.round(height / this.lineHeight);
    this.lines = Array(nbLines).fill(0).map((v, idx) => idx + 1);
    this.lineWidth = editor.display.lineNumWidth;
    this.topPosition = document.querySelector('.CodeMirror-scroll').scrollTop;
    this.cdr.detectChanges();

  }


}

CodeMirror Line-Break 不添加行号 - Angular

CodeMirror Line-Break doesn't add line number - Angular

css

codemirror

typescript

angular

ngx-codemirror