Как применить выравнивание текста к абзацу в Codemirror на Angular? - PullRequest
Новая
       14

Как применить выравнивание текста к абзацу в Codemirror на Angular?

0 голосов
/ 09 октября 2018

В 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();
}

Я получаю такой результат: enter image description here

Мне нужно применить стиль для CodeMirror-Line.Есть ли другие способы реализовать это?

1 Ответ

0 голосов
/ 26 октября 2018

Я решил эту проблему следующим образом 

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;
  }
}
...