咔叽游戏

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 740|回复: 2

[ASP.NET] Asp.Net

[复制链接]
  • TA的每日心情
    无聊
    2019-4-21 13:02
  • 签到天数: 3 天

    [LV.2]圆转纯熟

    发表于 2022-1-10 21:32:12 | 显示全部楼层 |阅读模式
    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等。我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能。Monaco Editor是著名的VSCode的前身,项目地址:https://microsoft.github.io/monaco-editor/。本文介绍在Asp.Net Core项目中使用Monaco Editor实现代码编辑器功能。
    安装

    可以使用npm下载moaco-editor:
    npm install [email protected]
    我们需要的文件在node_modules/monaco-editor/min/vs目录中,将整个vs目录拷贝到Asp.Net Core Web项目的wwwroot/lib目录下:
    Asp.Net-1.png

    在Program.cs中需要启动静态文件:
    app.UseStaticFiles();
    在布局页面中引入如下css和js:
    1. <link data-name="vs/editor/editor.main" rel="stylesheet" href="~/lib/vs/editor/editor.main.css" rel="external nofollow"  />
    2.     <script  src="~/lib/vs/loader.js"></script>
    3.     <script  src="~/lib/vs/editor/editor.main.nls.js"></script>
    4.     <script src="~/lib/vs/editor/editor.main.js"></script>
    复制代码
    基本的环境设置就完成了。
    基本功能

    现在可以在页面中实现编辑器的基本功能,在页面中增加一个div,作为编辑器容器:
    1. <div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
    复制代码
    然后增加编辑器的js代码:
    1. <script>
    2.     $(document).ready(function () {
    3.         require.config({ paths: { 'vs': '/lib/vs' } });
    4.         monaco.editor.create(document.getElementById('container'), {
    5.             value: "function sayHello(){\n console.write('Hello World');\n}",
    6.             language: 'javascript'
    7.         });
    8.     })
    9. </script>
    复制代码
    Asp.Net-2.png

    设置

    编辑器有多种设置,比如是否显示代码行、显示样式等等,设置完成后,可以使用updateOptions修改设置,示例代码如下:
    1.         var editor = monaco.editor.create(document.getElementById('container'), {
    2.             value: "function sayHello(){\n console.write('Hello World');\n}",
    3.             language: 'javascript',
    4.             lineNumbers: 'on',
    5.             roundedSelection: false,
    6.             scrollBeyondLastLine: false,
    7.             readOnly: false,
    8.             theme: 'vs-dark'
    9.         });
    复制代码
    Asp.Net-3.png

    代码比较

    monaco editor的一个强大的功能是文字比较功能,可以将两段文字进行比较:
    1. <script>
    2.     require.config({ paths: { 'vs': '/lib/vs' } });
    3.     var originalModel = monaco.editor.createModel(
    4.         '删除行\n行一\n行二\n行三内容\n更多内容',
    5.         'text/plain'
    6.     );
    7.     var modifiedModel = monaco.editor.createModel(
    8.         '\n行一\n行二\n行三\n更多内容\n增加行',
    9.         'text/plain'
    10.     );
    11.     var diffEditor = monaco.editor.createDiffEditor(document.getElementById('container'), {
    12.         // You can optionally disable the resizing
    13.         enableSplitViewResizing: false
    14.     });
    15.     diffEditor.setModel({
    16.         original: originalModel,
    17.         modified: modifiedModel
    18.     });
    19. </script>
    复制代码
    效果如下:
    Asp.Net-4.png

    自定义语言

    monaco editor 支持常见的几乎所有编程语言,在编辑这些语言的代码时可以高亮显示关键字,同时也支持对自定义语言的扩展。其功能非常强大,同时配置起来也比较复杂,这里只举个简单的例子,说明如何使用。
    这里使用的“语言”很简单,目的是记录中国象棋的棋谱,关键字只有代表“车马炮”等棋子的大写汉语拼音,运算符只有代表向前、向后和平行移动的“++”、“--”和“==”,还有就是注释。
    使用自定义语言,首先要注册这个语言的id:
    1.         monaco.languages.register({ id: 'mylang' });
    复制代码
    然后设置语言的Token Provider:
    1. monaco.languages.setMonarchTokensProvider('mylang', getlang());
    复制代码
    这样就可以在编辑器中使用这种自定义语言了,下面是完整的代码:
    1. @page
    2. @model CustomLanguageModel
    3. @{
    4.     ViewData["Title"] = "自定义语言";
    5. }
    6. <h1>@ViewData["Title"]</h1>
    7. <div id="container" style="height: 800px"></div>
    8. <script>
    9.     var require = { paths: { vs: '/lib/vs' } };
    10. </script>
    11. @section Scripts
    12. {
    13. <script>
    14.     $(document).ready(function () {
    15.         monaco.languages.register({ id: 'mylang' });
    16.         monaco.languages.setMonarchTokensProvider('mylang', getlang());
    17.         var sampleEditor=monaco.editor.create(document.getElementById('container'), {
    18.             model:null
    19.         }
    20.         );
    21.         setTimeout(function(){
    22.              var model=monaco.editor.createModel('// 炮二平五 \nPAO 2 == 5 \n//马八进七 \nMA 8 ++ 7', 'mylang');
    23.              sampleEditor.setModel(model);
    24.         },1);
    25.     });
    26.     function getlang(){
    27.         return {
    28.             //车马炮相士将帅兵卒
    29.           keywords: [ 'JU', 'MA', 'PAO', 'XIANG', 'SHI', 'JIANG', 'SHUAI', 'BING', 'ZU' ],
    30.           //++ 进 --退 ==平
    31.           operators: [ '++', '--', '=='  ],
    32.           symbols:  /[=><!~?:&|+\-*\/\^%]+/,
    33.           // The main tokenizer for our languages
    34.           tokenizer: {
    35.             root: [
    36.               [/[A-Z][\w\$]*/, {cases: { '@@keywords': 'keyword' }}],
    37.               { include: '@@whitespace' },
    38.               [/@@symbols/, { cases: { '@@operators': 'operator'} } ],
    39.               [/\d./, 'number'],
    40.             ],
    41.             comment: [
    42.               [/[^\/*]+/, 'comment' ],
    43.               [/\/\*/,    'comment', '@@push' ],
    44.               ["\\*/",    'comment', '@@pop'  ],
    45.               [/[\/*]/,   'comment' ]
    46.             ],
    47.             whitespace: [
    48.               [/[ \t\r\n]+/, 'white'],
    49.               [/\/\*/,       'comment', '@@comment' ],
    50.               [/\/\/.*$/,    'comment'],
    51.             ],
    52.           },
    53.         };
    54.     }
    55. </script>
    56. }}
    复制代码
    效果如下:
    Asp.Net-5.png

    本文的示例项目已经上传到github: https://github.com/zhenl/monacoEditorDotNet
    到此这篇关于Asp.Net Core 使用Monaco Editor 实现代码编辑器的文章就介绍到这了,更多相关Asp.Net Core代码编辑器内容请搜索咔叽论坛以前的文章或继续浏览下面的相关文章希望大家以后多多支持咔叽论坛!

    原文地址:https://www.jb51.net/article/233718.htm
  • TA的每日心情
    开心
    2022-12-18 23:39
  • 签到天数: 40 天

    [LV.5]炉火纯青

    发表于 2022-10-17 23:52:02 | 显示全部楼层

    看了LZ的帖子,我只想说一句很好很强大! www.2nzz.com
    回复 支持 反对

    使用道具 举报

  • TA的每日心情

    2023-11-10 19:07
  • 签到天数: 2 天

    [LV.1]登堂入室

    发表于 2023-9-23 20:39:48 | 显示全部楼层
    很好很强大
    回复 支持 反对

    使用道具 举报

    QQ|免责声明|小黑屋|手机版|Archiver|咔叽游戏

    GMT+8, 2024-3-28 21:23

    Powered by Discuz! X3.4

    © 2001-2023 Discuz! Team.

    快速回复 返回顶部 返回列表