安装

可以使用npm下载moaco-editor:

npm install monaco-editor@0.31.1

我们需要的文件在node_modules/monaco-editor/min/vs目录中，将整个vs目录拷贝到Asp.Net Core Web项目的wwwroot/lib目录下：

在Program.cs中需要启动静态文件:

app.UseStaticFiles();

在布局页面中引入如下css和js:

    <link data-name="vs/editor/editor.main" rel="stylesheet" href="~/lib/vs/editor/editor.main.css" />

    <script  src="~/lib/vs/loader.js"></script>    <script  src="~/lib/vs/editor/editor.main.nls.js"></script>    <script src="~/lib/vs/editor/editor.main.js"></script>

基本的环境设置就完成了。

基本功能

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<script>    $(document).ready(function () {        require.config({ paths: { 'vs': '/lib/vs' } });        monaco.editor.create(document.getElementById('container'), {            value: "function sayHello(){n console.write('Hello World');n}",            language: 'javascript'        });    })</script>

设置

        var editor = monaco.editor.create(document.getElementById('container'), {            value: "function sayHello(){n console.write('Hello World');n}",            language: 'javascript',            lineNumbers: 'on',            roundedSelection: false,            scrollBeyondLastLine: false,            readOnly: false,            theme: 'vs-dark'        });

代码比较

monaco editor的一个强大的功能是文字比较功能，可以将两段文字进行比较：

<script>    require.config({ paths: { 'vs': '/lib/vs' } });    var originalModel = monaco.editor.createModel(        '删除行n行一n行二n行三内容n更多内容',        'text/plain'    );    var modifiedModel = monaco.editor.createModel(        'n行一n行二n行三n更多内容n增加行',        'text/plain'    );    var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {        // You can optionally disable the resizing        enableSplitViewResizing: false    });    diffEditor.setModel({        original: originalModel,        modified: modifiedModel    });</script>

效果如下：

自定义语言

这里使用的“语言”很简单，目的是记录中国象棋的棋谱，关键字只有代表“车马炮”等棋子的大写汉语拼音，运算符只有代表向前、向后和平行移动的“++”、“–”和“==”，还有就是注释。
使用自定义语言，首先要注册这个语言的id:

        monaco.languages.register({ id: 'mylang' });

然后设置语言的Token Provider：

        monaco.languages.setMonarchTokensProvider('mylang', getlang());

@page@model CustomLanguageModel@{    ViewData["Title"] = "自定义语言";}<h1>@ViewData["Title"]</h1><div id="container" style="height: 800px"></div><script>    var require = { paths: { vs: '/lib/vs' } };</script>@section Scripts{<script>    $(document).ready(function () {        monaco.languages.register({ id: 'mylang' });        monaco.languages.setMonarchTokensProvider('mylang', getlang());        var sampleEditor=monaco.editor.create(document.getElementById('container'), {            model:null        }        );        setTimeout(function(){             var model=monaco.editor.createModel('// 炮二平五 nPAO 2 == 5 n//马八进七 nMA 8 ++ 7', 'mylang');             sampleEditor.setModel(model);        },1);    });    function getlang(){        return {            //车马炮相士将帅兵卒          keywords: [ 'JU', 'MA', 'PAO', 'XIANG', 'SHI', 'JIANG', 'SHUAI', 'BING', 'ZU' ],          //++ 进 --退 ==平           operators: [ '++', '--', '=='  ],          symbols:  /[=><!~?:&|+-*/^%]+/,          // The main tokenizer for our languages          tokenizer: {            root: [              [/[A-Z][w$]*/, {cases: { '@@keywords': 'keyword' }}],                { include: '@@whitespace' },              [/@@symbols/, { cases: { '@@operators': 'operator'} } ],              [/d./, 'number'],            ],            comment: [              [/[^/*]+/, 'comment' ],              [//*/,    'comment', '@@push' ],                 ["\*/",    'comment', '@@pop'  ],              [/[/*]/,   'comment' ]            ],            whitespace: [              [/[ trn]+/, 'white'],              [//*/,       'comment', '@@comment' ],              [///.*$/,    'comment'],            ],          },        };    }</script>}}

效果如下：

转自
https://www.cnblogs.com/zhenl/p/15758472.html

喜欢的朋友点一下关注 点关注不迷路