如何在 Angular 上对 Codemirror 中的段落应用文本对齐？

Question

在HTML中：

<codemirror 
 [(ngModel)]="chaptersService.currentChapter.novel" 
 [config]="{
  lineWrapping: true, 
  autofocus: true, 
  showCursorWhenSelecting: true
 }"
 #novelEditor>
</codemirror>

在component.ts中：

import { CodemirrorComponent } from 'ng2-codemirror';
...
@ViewChild('novelEditor') private novelEditor: CodemirrorComponent;
...
setTextCenter() {
 const cm = this.novelEditor.instance;
 const num = cm.getCursor().line;
 const lineHandle = cm.getLineHandle(num);
 cm.markText(
  {line: num, ch: 0},
  {line: num, ch: lineHandle.styles[1]},
  { css: 'text-align: center'}
 );
 this.refreshCodemirror();
}

我得到这样的结果：

我需要为 CodeMirror 行应用样式。还有其他方法可以实现吗？

Answer 1

我是这样解决这个问题的

setTextLeft() {
 const cm = this.novelEditor.instance;
 const num = cm.getCursor().line;
 cm.removeLineClass(num,'text');
 cm.addLineClass(num, 'text', 'lineTextLeft');
 this.refreshCodemirror();
}
setTextCenter() {
 const cm = this.novelEditor.instance;
 const num = cm.getCursor().line;
 cm.removeLineClass(num,'text');
 cm.addLineClass(num, 'text', 'lineTextCenter');
 this.refreshCodemirror();
}
setTextRight() {
 const cm = this.novelEditor.instance;
 const num = cm.getCursor().line;
 cm.removeLineClass(num,'text');
 cm.addLineClass(num, 'text', 'lineTextRight');    
 this.refreshCodemirror();
}

和 scss:

.CodeMirror-line {
  &.lineTextLeft {
    text-align: left;
  }
  &.lineTextCenter {
    text-align: center;
  }
  &.lineTextRight {
    text-align: right;
  }
}

如何在 Angular 上对 Codemirror 中的段落应用文本对齐？

How to apply text alignment to a paragraph in Codemirror on Angular?

javascript

codemirror

electron

angular