https://github.com/BlazorBits/BlazorBits

BlazorBits
https://github.com/BlazorBits/BlazorBits

Last synced: 2 days ago
JSON representation

BlazorBits

• Host: GitHub
• URL: https://github.com/BlazorBits/BlazorBits
• Owner: BlazorBits
• License: mit
• Created: 2018-05-16T17:19:34.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-08T08:45:28.000Z (about 6 years ago)
• Last Synced: 2024-03-09T21:33:39.445Z (4 months ago)
• Language: JavaScript
• Size: 7.89 MB
• Stars: 22
• Watchers: 5
• Forks: 6
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Lists

• AdrienTorris_awesome-blazor - BlazorBits -   Components including [Monaco editor](https://github.com/Microsoft/monaco-editor) . (Libraries & Extensions / Components)

README

        
## Monaco Component for Blazor

Please leave your feedback as an issue or star the repo or let me know on [@david_n_m_bond](https://twitter.com/david_n_m_bond).

This project started from [@ma_khan](https://twitter.com/ma_khan)'s excellent ChartJs Blazor component project codebase.

## Prerequisites

Don't know what Blazor is? Read [here](https://github.com/aspnet/Blazor)

Blazor dependencies:

1. VS 15.7 or higher

2. DotNetCore 2.1 Preview 2 or higher

## Installation

...to follow...

To Install

```

Install-Package BlazorComponents.Monaco

```

or

```

dotnet add package BlazorComponents.Monaco

```

## Usage

1. In cshtml file add this:

```html

@page "/"

@using BlazorComponents.Monaco

@using BlazorComponents.Shared

Monaco using Blazor



	Clear

	Read



@functions {

EditorModel _editorModel { get; set; }

MonacoEditor _editor;

protected override void OnInit()

{

	_editorModel = new EditorModel

	{

		Language = "csharp",

		Script = @"using System;

// Awesomeness

public class Test

{

	public void X()

	{

		Console.WriteLine(""Hello world!"");

	}

}"

	};

}

public void Update()

{

	_editor.EditorUpdate();

}

public void Reset()

{

	_editor.EditorSetValue("");

}

}

```

2. In index.html add:

```html

	

	

...

	

	

	

	

```

## Sample Output

![Editor](editor.png)