在线代码编辑器选型

在线代码编辑器选型

一、CodeMirror https://github.com/codemirror/CodeMirror

• 简介

  CodeMirror 是一款“Online Source Editor”，基于Javascript，短小精悍，风格包括js, java, php, c++等等100多种语言。比较强大可以自行配置语言模式。能够做到自动补全，代码折叠，可配置键盘事件，vim， emacs， sublime text 风格、能完成查找替换，括号匹配，分栏显示，显示行号，自行配置字体大小和风格，是许多大名鼎鼎的在线代码编辑器的基础库。

• 实践

  lib 下是放的是核心库和核心 css，mode 下放的是各种支持语言的语法定义，theme 目录下是支持的主题样式。一般在开发中，添加 lib 下的引用和 mode 下的引用就够了。

  下面两个是使用 Code Mirror 必须引入的：

  <link rel="stylesheet" href="./codemirror-5.58.3/lib/codemirror.css">
  <script src="./codemirror-5.58.3/lib/codemirror.js"></script>
  

  接下来要引用的就是在 mode 目录下编辑器中要编辑的语言对应的 js 文件，这里以 javascript 为例：

  <!--代码高亮-->
  <script src="./codemirror-5.58.3/mode/javascript/javascript.js"></script>
  

  引用的文件用于支持对应语言的语法高亮。

  不同的主题，只需按照如下引入即可：

  <!--引入css文件，用以支持主题-->
  <link rel="stylesheet" href="./codemirror-5.58.3/theme/dracula.css"/>
  

  创建编辑器
  使用textarea标签作为容器

  <textarea id="demotext"></textarea>
  

  在js中进行对之前引入的文件进行配置配置

  var editor = CodeMirror.fromTextArea(document.getElementById("demotext"), {
          lineNumbers: true,
          mode: "javascript", // 语言
          theme: "dracula",	//设置主题
          //readOnly: true,        //只读
      });
  

• 效果图

  

• 总结

  通过以上配置可以快速生成一个简洁的在线编辑器，也可以通过引入其他功能对应的js文件进行丰富。总言而之是个小巧、灵活的在线编辑器库！

• 参考链接

  https://blog.csdn.net/qq_37193537/article/details/88426196

---

二、Monaco Editor https://github.com/microsoft/monaco-editor

• 简介

  Monaco Editor是为VS Code提供支持的代码编辑器，运行在浏览器环境中。编辑器提供代码提示，智能建议等功能。供开发人员远程更方便的编写代码。移动浏览器或移动Web框架不支持Monaco编辑器。简单的理解就是VSCode中的代码编辑器和Monaco Editor使用的很多相同的核心模块，你可以将Monaco Editor用到自己的项目中，作为云端编辑器的支持，支持IE 11，Edge，Chrome，Firefox，Safari和Opera！

• 实践

  为了编写demo方便，我直接用的script直接引入的js文件。
  官方也提供了不同情况下的demo，非常全。github链接

  下面放一些核心代码，更详细的配置请参见官网。

      <!-- css文件 -->
      <link
  		rel="stylesheet"
  		data-name="vs/editor/editor.main"
  		href="./package/min/vs/editor/editor.main.css"
      />
  

      <!-- js文件 -->
      <script>
  		var require = { paths: { vs: './package/min/vs' } };
  	</script>
      <script src="./package/min/vs/loader.js"></script>
  	<script src="./package/min/vs/editor/editor.main.nls.js"></script>
  	<script src="./package/min/vs/editor/editor.main.js"></script>
      <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>
  	<script>
  		var editor = monaco.editor.create(document.getElementById('container'), {
  			value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
              language: 'javascript',
              theme: "vs-dark" // 主题
  		});
  	</script>
  

• 效果图

  

• 总结

  由图可见，功能十分齐全，基本上是vscode 在线版。

---