欢迎光临
我的个人博客网站

你是否需要高逼格的代码编辑功能


你是否需要高逼格的代码编辑功能

前言

最近项目需要在系统中增加代码编辑,为客户提供二次开发功能,让系统更容易扩展。为了实现这个功能,可没少折腾,在百度上一通翻箱倒柜,发现用的比较多的是codemirror,像开发人员踏足的w3school就是用的codemirror
你是否需要高逼格的代码编辑功能

但是codemirror只是基本的代码编辑和着色功能,没有我想要的自带自动完成功能,即编辑时自动触发自动完成(我测试时,是需要按快捷键才能出现自动完成,为了自动完成,还必须每次输入后还有按快捷键,所以放弃了)。又是一番找寻。众里寻她千百度,蓦然回首,那她却在微软处。原来微软开源了一款代码编辑神器monaco-editor,Visual Studio Code强大的代码编辑功能就是使用的她,她的家https://github.com/microsoft/monaco-editor, 看她第一眼就深深的吸引了我,对就她了,非她不”娶”了。

插件选择

功能 codemirror monaco-editor
官网 https://codemirror.net https://github.com/microsoft/monaco-editor
代码编辑和着色 支持 支持
代码自动完成 自动完成关键字需要先行维护 自带
支持语言 html,javascript,css等常用语言都支持 codemirror支持的都支持,还支持一些codemirror不支持的她也支持,比如本人需要的csharp
大小 小,几百kb,可按需引用语言包 原始大小80m,忍受不了这么大,一番精简到22m

monaco-editor支持的语言见下图。你是否需要高逼格的代码编辑功能

monaco-editor引用即用的代码自动完成功能。
你是否需要高逼格的代码编辑功能

如何使用

​ 经过一番权衡后,还是选择了monaco-editor,现在我们开始把她”娶”回家。要娶媳妇回家,怎能没有房子呢,打开vs,选择ASP.NET core web 应用,我们来为她建一栋。新家建好后,我来把她迎进来,看看新家怎么样。

你是否需要高逼格的代码编辑功能

把媳妇安排到_CodeLayout.cshtml房间住下。为了媳妇能找得到房间,需指定一个路径。

//具体路径路径根据类库放置位置进行调整 <script src="~/lib/monaco-editor/min/vs/loader.js"></script>  

你是否需要高逼格的代码编辑功能

媳妇一身好才艺,可别浪费了,发挥发挥她的特长。帮我们做个趁手的在线代码编辑器吧。

首先建一个首页Index.cshtml,前端建立一个按钮,一个代码编辑框和一个运行结果展示。前端代码如下

<div class="text-center">     <button id='bt_run' onclick="addIframe()">运行(R)</button>     <fieldset class="ui-grid-a">         <!--编辑框-->         <div class="ui-block-a">             <div id="editcode" style="width: 800px; height: 800px; border: 1px solid grey"></div>         </div>         <div class="ui-block-b">             <div id="iframe">                  <!--显示控件-->                 <div id="iframewrapper">                 </div>             </div>         </div>     </fieldset> </div> 

JS初始化配置

  window.onload=function ()      {         //**代码编辑器初始化 ,初始化很简单,就下面几行代码就实现了代码编辑*/         code= window.localStorage["editcode"]         if(code==null) code= '<HTML>this is test </HTML>';         //指定配置路径,路径必须指定正确,不然无法正常显示         require.config({ paths: { vs: '../lib/monaco-editor/min/vs' } });         require(['vs/editor/editor.main'], function () {             //**创建编辑器对象 */             editor = monaco.editor.create(document.getElementById('editcode'), {                 //value: ['function x() {', 'tconsole.log("Hello world!");', '}'].join('n'),                 value: code,                          //初始化代码                 // language: 'javascript',                 language: 'html',                    //指定代码编辑语言                 theme: 'vs-dark'                     //指定编辑框主题             });         });     } 

以下说完整的javascript代码,使用monaco-editor就下面几行代码就实现在线代码编辑功能。

<script>      let code;     var editor;     let framename = "iframe_test";     window.onload=function ()      {         code= window.localStorage["editcode"]         if(code==null) code= '<HTML>this is test </HTML>';         require.config({ paths: { vs: '../lib/monaco-editor/min/vs' } });         require(['vs/editor/editor.main'], function () {             editor = monaco.editor.create(document.getElementById('editcode'), {                 //value: ['function x() {', 'tconsole.log("Hello world!");', '}'].join('n'),                 value: code,                 // language: 'javascript',                 language: 'html',                 theme: 'vs-dark'             });         });     }          var i = 0;             var editorArray = [];         function addIframe() {              //let editor = editorlist["editcode"];                         if (editor == null) { console.error("编辑器没有初始化!"); return; }             let curr_frame = document.getElementById(framename);             var If = curr_frame != null ? curr_frame : document.createElement("iframe");             //var If = document.createElement("iframe");             If.style.height = "800px";             If.style.width = "100%";             If.id = framename;             If.name = framename;             if (curr_frame == null) document.all("iframewrapper").appendChild(If);             var doc1 = window.frames[framename].document;             doc1.close();             let editorArray = [];             editorArray.push(editor);             let code= editorArray[0].getValue();             doc1.write(code);             window.localStorage["editcode"] = code;          } </script> 

一个简单的在线代码编辑器就做好了,点击运行按钮,运行代码编辑器内容,看看效果吧!

你是否需要高逼格的代码编辑功能
完整的演示代码,移步https://github.com/sunaccess/ifand

赞(0) 打赏
未经允许不得转载:张拓的天空 » 你是否需要高逼格的代码编辑功能
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏