Closed susonwaiba closed 7 years ago
@susonwaiba you can use executeEdits API as suggested in the answer. In case you want to use the same API or some other API with angular 2 then i can expose editor instance that will be available to parent component.
var editor = monaco.editor.create(document.getElementById("container"), {
value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
language: "javascript",
lineNumbers: false,
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: false,
theme: "vs-dark",
});
// below code will insert text "FOO"
var line = editor.getPosition();
var range = new monaco.Range(line.lineNumber, 1, line.lineNumber, 1);
var id = { major: 1, minor: 1 };
var text = "FOO";
var op = {identifier: id, range: range, text: text, forceMoveMarkers: true};
editor.executeEdits("my-source", [op]);
In above code variable editor is used for api. But i don't see a variable to expose api in doc.? There is only editor options. and I tried using editor options variable but it shows error!
Yes there is no editor variable exposed. if you need one i will try to do that by this weekend. If you have some other solution please raise a pull request i will merge that.
I have send pull request. Below will solve my request.
import MonacoEditor and also supply at providers (eg: on app.module.ts):
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MonacoEditorModule, MonacoEditor } from 'ngx-monaco-editor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MonacoEditorModule
],
providers: [MonacoEditor],
bootstrap: [AppComponent]
})
export class AppModule {
}
import MonacoEditor and define at constructor (eg: on app.component.ts):
import { Component } from '@angular/core';
import { MonacoEditor } from 'ngx-monaco-editor';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
editorOptions = {theme: 'vs-dark', language: 'javascript'};
code: string= 'function x() {\nconsole.log("Hello world!");\n}';
onInsertContentClick() {
this.monacoEditor.insert('<p>This is the default content</p>');
}
constructor(
private monacoEditor: MonacoEditor
) { }
}
I have exposed editor instance. you can check in latest documentation for using that.
@atu1kr how to use this editor instance in a typescript file. for example, I want editor.trigger when the user clicks on some button.
I am developing a new feature where I want to paste some text at the current cursor position in the editor. I am using ngx-monaco-editor v8.1.1 in my Angular v13.3 project. Can someone help ?
@faisalmukhtar98 you can use this line // place the suggestion where cursor is pointing this.editorInstance.trigger('keyboard', 'type', { text: suggestionText });
@ubaid1122 I don't want a suggestion as in tooltip that pops up.
My use case is -> I have a chat section on my left container and my editor on my right container. I am trying to paste the content from my chat section to the current cursor position in my editor by click an icon in my chat area.
I am using the global namespace "monaco" so I get access to the editor instance.
I tried your solution this.editorInstance.trigger('keyboard', 'type', { text: suggestionText });
but I get an error "Property 'trigger' does not exist on type 'typeof editor'."
I also tried with
monaco.editor.onDidCreateEditor((editor) => { console.log("Column Position = ",editor.getPosition().column); console.log("Row Position = ",editor.getPosition().lineNumber); });
but no luck.
suggestionText is to be replace with actual text you want in editor. and initialize this.editorInstance like this public onMonacoEditorInit(event) { this.editorInstance = event; }
and call this method from HTML <ngx-monaco-editor [options]="editorOptions" (onInit)="onMonacoEditorInit($event)">
thanks @ubaid1122 your solution worked.
Cheers!
https://stackoverflow.com/questions/41642649/how-do-i-insert-text-into-a-monaco-editor could anyone help me to gain this.?