Microsoft Monaco編輯器在瀏覽器中獲得行值

我一直在努力使用基於瀏覽器的Microsoft Monaco Editor版本，我無法在操場上找到任何文檔或任何示例來告訴您如何獲得編輯器中的特定行。Microsoft Monaco編輯器在瀏覽器中獲得行值

例如：

class Example { 
    private m:number; 

    public met(): string { 
     return "Hello world!"; 
    } 
}

線路2將private m:number;。

您將如何獲得該行的值或該行的部分值，然後使用代碼更改其值。我想將該操作放入鍵盤快捷鍵中。

來源

2016-07-30 Jesse

我認爲摩納哥沒有這樣的內置功能，因爲我沒有找到它。但我做的是使用下面的代碼：

editor.addAction({ 
     id: 'some_id', 
     label: 'label', 
     keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_C], 
     run: function(ed) { 
      var position = ed.getPosition(); 
      var text = ed.getValue(position); 
      var splitedText=text.split("\n"); 
      var line = splitedText[position.lineNumber-1]; 

      // now you have current line 
      // you can also get any other line 
      // and do something with that line 

      splitedText[position.lineNumber-1]= _newLineText_ 
      ed.setValue(splitedText.join("\n")); 
      ed.setPosition(position); // to return the pointer to the a position before editing text 

      return null; 
     }, 
     enablement: { 
      textFocus: true, 
     } 
    });

這種方法適合於小文件，但對於大文件的整個編輯器將重新亮點和一件壞事。

來源

2016-08-03 06:27:48

謝謝我一定會試一試，接受一次我測試一下。 – Jesse

只是一個側面的問題是有沒有辦法使用您自己的事件觸發摩納哥編輯器的命令，或者使用JavaScript重寫默認鍵盤快捷方式？ – Jesse

是否要在摩納哥綁定鍵盤快捷鍵以進行此檢查[that]（https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-listening-to-key-events ） –

獲取一行的內容其實很簡單：IModel.getLineContent()

line = model.getLineContent(3);

注意，行號使用getLineContent()時從1開始。

更換文字更復雜一點，但你可以申請編輯操作：

通過編輯：IStandaloneCodeEditor.executeEdits
通過模型：IModel.applyEdits()和IModel.pushEditOperations()。

applyEdits不會將編輯添加到撤消堆棧，因此不鼓勵。然而所有這三個使用相同的接口的實際變化：IIdentifiedSingleEditOperation所以實際調用不會有很大的不同，所以我就用pushEditOperations()表現出來：

model.pushEditOperations(
    [], 
    [ 
     { 
      forceMoveMarkers: true, 
      identifier: "mychange", 
      range: { 
       startLineNumber: lineNo, 
       endLineNumber: lineNo, 
       startColumn: 1, 
       endColumn: line.length + 1, 
      }, 
      text: "this will be the new text there" 
     }, 
    ], 
    [] 
);

如果你想測試出來的摩納哥操場我用這個代碼（改編自「添加操作」爲例）：

var editor = monaco.editor.create(document.getElementById("container"), { 
    value: [ 
     '', 
     'class Example {', 
     '\tprivate m:number;', 
     '', 
     '\tpublic met(): string {', 
     '\t\treturn "Hello world!";', 
     '\t}', 
     '}' 
    ].join('\n'), 
    language: "typescript" 
}); 
var model = editor.getModel(); 

editor.addAction({ 
    id: 'my-unique-id', 
    label: 'Replace the second line', 
    keybindings: [ monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10 ], 
    contextMenuGroupId: 'custom', 
    contextMenuOrder: 1, 
    run: function(ed) { 
     var lineNo = 3; 
     var line = model.getLineContent(lineNo); 
     console.log("These were the contents of the second line before I replaced them:", line); 
     model.pushEditOperations(
      [], 
      [ 
       { 
        forceMoveMarkers: true, 
        identifier: "mychange", 
        range: { 
         startLineNumber: lineNo, 
         endLineNumber: lineNo, 
         startColumn: 1, 
         endColumn: line.length + 1, 
        }, 
        text: "this will be the new text there" 
       }, 
      ], 
      [] 
     ); 
    } 
});

在這種情況下，你可以運行由動作：

按的Ct rl + F10
右鍵單擊編輯器並選擇「替換第二行」（至少如果沒有隱藏編輯器上下文菜單）。

來源

2018-02-15 22:53:19 MSeifert

Microsoft Monaco編輯器在瀏覽器中獲得行值

回答

相關問題