ace-builds 介绍

参考文档:

https://github.com/ajaxorg/ace-builds

https://github.com/ajaxorg/ace

https://github.com/filebrowser/filebrowser/blob/master/frontend/src/views/files/Editor.vue

Ace(在线代码编辑器)介绍、使用

参考文档: https://blog.csdn.net/liuxiao723846/article/details/106732401

介绍

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。 Ace一直是Cloud9 IDE的主要编辑器，并且是Mozilla Skywriter（Bespin）项目的后继者。主要包括以下特性：

超过110种语言的语法高亮显示（可以导入TextMate / Sublime Text.tmlanguage文件）
超过20个主题（可以导入TextMate / Sublime Text .tmtheme文件）
自动缩进和缩进
可选命令行
处理大量文档（似乎限制为四百万行！）
完全可定制的按键绑定，包括vim和Emacs模式
搜索并替换为正则表达式
突出显示匹配的括号
在软标签和真实标签之间切换
显示隐藏的字符
使用鼠标拖放文本
换行
代码折叠
多个光标和选择
实时语法检查器（当前为JavaScript / CoffeeScript / CSS / XQuery）
剪切，复制和粘贴功能

Ace是一个开源的项目：

官网：https://ace.c9.io/#nav=embedding
github：https://github.com/ajaxorg/ace
在线demo：https://ace.c9.io/build/kitchen-sink.html

使用

可以非常轻松的将Ace嵌入到已有网页中。可以在 ace-builds repository中获取相关的库文件（src、min、conflict…），也可以通过cdn获取对应的库文件，例如：PageCDN, jsDelivr or cdnjs.

看一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
<title>ACE in Action</title>
<style type="text/css" media="screen">
#editor { 
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
</style>
</head>
<body>
 
<div id="editor">
</div>
   
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.4/ace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.4/worker-json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.4/mode-json.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.4/theme-textmate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.23.4/worker-json.min.js"></script>
<script>
var obj =  {
  "myProp": "myValue",
  "subObj": {
    "prop": "value"
  }
};
document.getElementById('editor').innerHTML = JSON.stringify(obj,null,2);
var editor = ace.edit("editor");
editor.setTheme("ace/theme/textmate");
var JavaScriptMode = ace.require("ace/mode/json").Mode;
editor.session.setMode(new JavaScriptMode());
</script>
</body>
</html>

此外，在ace-builds repository中，可以通过editor.html或simple example查看有关将ace嵌入网页的简单方法。要查看ace的实际应用，请转到kitchen-sink-demo，scrollable-page-demo或demo

If you want to clone and host Ace locally you can use one of the pre-packaged versions. Just copy one of src* subdirectories somewhere into your project, or use RequireJS to load the contents of lib/ace folder as ace

其他

jquery有一个对比的插件，官网：https://plugins.jquery.com/pretty-text-diff/

react也有一个ace的组件，该组件功能相对更强大（该组件支持：spell Editor和diff Editor），github：https://github.com/securingsincity/react-ace

ace的npm版本叫做brace（browse ace），地址：https://www.npmjs.com/package/brace