atularen / ngx-monaco-editor

Monaco Editor component for Angular 2 and Above
https://www.npmjs.com/package/ngx-monaco-editor
MIT License
428 stars 155 forks source link

how to access the edited code in ngx-monaco-diff-editor? #99

Open hakimovic opened 5 years ago

hakimovic commented 5 years ago

Hello, everything is in the title, I would access the final version of edited text in the diff editor but trying [(ngModel)] and ngModelChange wasn't working. Am I missing something? Is this even possible? thanks for your answers and great work!

atu1kr commented 5 years ago

[(ngModel)] and ngModelChange works with the editor just follow steps mentioned in README Make sure to include FormsModule in import list of module declaration.

hakimovic commented 5 years ago

@atul-wizni thank you for replying, I did it work with <ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor> but i can't make it work with <ngx-monaco-diff-editor [options]="options" [originalModel]="originalModel" [modifiedModel]="modifiedModel"></ngx-monaco-diff-editor> here the modifiedModel is only 'inputable' and I can't access the modifiedModel final version, I will try access the monaco editor object to get the text like in this playground: monaco diff editor playground with html:

<div id="editorProperties"></div>
<div id="container" style="height:100%;"></div>

and javascript:

// The diff editor offers a navigator to jump between changes. Once the diff is computed the <em>next()</em> and <em>previous()</em> method allow navigation. By default setting the selection in the editor manually resets the navigation state.
var originalModel = monaco.editor.createModel("just some text\n\nHello World\n\nSome more text", "text/plain");
var modifiedModel = monaco.editor.createModel("just some Text\n\nHello World\n\nSome more changes", "text/plain");

var diffEditor = monaco.editor.createDiffEditor(document.getElementById("container"));
diffEditor.setModel({
    original: originalModel,
    modified: modifiedModel
});

document.getElementById('editorProperties').innerHTML = diffEditor.getModel().modified.getValue();
console.log(diffEditor.getModel().modified.getValue())
nitslucky commented 5 years ago

Hi, were you able to get or access modifiedModel value after pasting new code or content on the right side of the editor in <ngx-monaco-diff-editor [options]="options" [originalModel]="originalModel" [modifiedModel]="modifiedModel"></ngx-monaco-diff-editor>

nitslucky commented 5 years ago

I was able to access modifiedModel check here