javascript - CodeMirror-ウィンドウの中央に表示されるように行までスクロールすることはできますか？

Question

CodeMirrorでHTMLコードの行を強調表示しており、CodeMirrorエディターを特定の行にスクロールするアンカーを追加したいと思います。

setCursorメソッドを使用してX行までスクロールできます。ただし、CodeMirrorウィンドウの中央にX行を配置したいと思います。それをしてもいいですか？APIとデモを勉強しましたが、運がありませんでした。

ありがとう！

Answer 1

これは機能するはずです：

var editor = CodeMirror.fromTextArea(...);

function jumpToLine(i) { 
    var t = editor.charCoords({line: i, ch: 0}, "local").top; 
    var middleHeight = editor.getScrollerElement().offsetHeight / 2; 
    editor.scrollTo(null, t - middleHeight - 5); 
} 

Answer 2

とても簡単です。

初期化：

var editor = CodeMirror.fromTextArea(...);

現在の位置を後で設定する場合は、次を使用できます。

editor.getScrollInfo();

JavaScriptオブジェクトを返します。

{
  "left": 0,
  "top": 0,
  "height": 500,
  "width": 500,
  "clientHeight": 300,
  "clientWidth": 200
} 

これで、次を使用してエディターのスクロール位置を設定できます。

editor.scrollTo(left,top);

Answer 3

https://codemirror.net/doc/manual.html#scrollIntoViewが必要です

あなたが望むことをするはずのオプションのマージンパラメータに注意してください：

cm.scrollIntoView(what: {line, ch}|{left, top, right, bottom}|{from, to}|null, ?margin: number)

コードは次のようになります。

cm.scrollIntoView({line:50, char:5}, 200)

Answer 4

初期化：

var editor = CodeMirror.fromTextArea(...);

エディターの中央に行を表示する関数：

function jumpToLine(i) {

    // editor.getLineHandle does not help as it does not return the reference of line.
    editor.setCursor(i);
    window.setTimeout(function() {
       editor.setLineClass(i, null, "center-me");
       var line = $('.CodeMirror-lines .center-me');
       var h = line.parent();

       $('.CodeMirror-scroll').scrollTop(0).scrollTop(line.offset().top - $('.CodeMirror-scroll').offset().top - Math.round($('.CodeMirror-scroll').height()/2));
   }, 200);
}