在线代码编辑器选型

一、CodeMirror https:///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,        //只读
    });

效果图

在线java代码转smail_css

总结

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


二、Monaco Editor https:///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>

效果图

在线java代码转smail_javascript_02

总结

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