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

介绍

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.4.12/ace.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/worker-json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-json.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/theme-textmate.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>

本地打开后即可预览。在编辑器中写代码时，F12会看到控制台报如下错误：（没有语法校验功能）

解决方法：在ace-builds repository中找到worker-json.js，将其和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

Ace(在线代码编辑器)介绍、使用相关推荐

WebRTC与Ace在线代码编辑器合作，实现实时协作编程
为什么80%的码农都做不了架构师?>>> 日期:2013-5-17 来源:GBin1.com 距离WebRTC真正的应用到一些很酷的应用中还有一段时日,但是即便是这样,很多开 ...
ace.js实现一个在线代码编辑器
背景 ACE简介: 功能实现 1.引入js 2.添加控件 3.初始化组件 4.保存时代码语法检测 5.效果图: 6.官网在线测试: 7.遇到的一些问题: 背景项目需要,在一些场景,用户需要手动编写一 ...
127.0.0.1 zxt.php_php单文件版在线代码编辑器使用方法
这篇文章主要介绍了php单文件版在线代码编辑器,个人感觉相当不错,分享给大家,需要的朋友可以参考下密码加密方式: * md5(自设密码+$ace) //$ace为cdn镜像地址使用方法: * 1. ...
(视频) 《快速创建网站》 3.2 WordPress多站点及Azure在线代码编辑器－扔掉你的ftp工具吧，修改代码全部云端搞定...
本文是<快速创建网站>系列的第6篇,如果你还没有看过之前的内容,建议你点击以下目录中的章节先阅读其他内容再回到本文. 访问本系列目录,请点击:http://devopshub.cn/tag ...
au如何关闭预览编辑器_在线IDE开发入门之从零实现一个在线代码编辑器
前言 3年前在AWS re:Invent 大会上AWS 宣布推出 Cloud9, 用于在云端编写.运行和调试代码,它可以直接运行在浏览器中,也就是传说中的 Web IDE.3年后的今天随着国内云计算的 ...
HTML5网页在线代码编辑器源码适用各类项目代码在线编辑
介绍: HTML5网页在线代码编辑器,代码高亮显示,输入代码爆炸动态效果显示. 如果谁改造一下运行功能,那基本可以做一个在线编辑运行软件引流了网盘下载地址: http://kekewl.net/wu ...
这个在线代码编辑器，可以把代码分享给任何人！
我想你可能经历过想要运行一小段代码,但是身边没有代码编辑器的时候:或者即便有本地编辑器,你也会觉得打开它很麻烦(启动以及相关配置的过程) 如果你的代码片段不是很复杂,你只是想测试一下快速得到结果,你可 ...
前端常用的在线代码编辑器CodeSandbox
目录前言 CodeSandbox介绍多种模板代码选择 VSCode一致体验运行Node容器 CodeSandbox示例前言有时候需要经常写一些测试代码或示例,然后将这些代码分享给他人,少量的 ...
在线代码编辑器的实现原理与思路探讨？
在线代码编辑器在线编辑各种文本形式的源代码,如js,html,php等,要支持语法高亮,即时输入即时高亮. 我的初步想法是用一个 <div contenteditable>&l ...

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

介绍

使用

其他

Ace(在线代码编辑器)介绍、使用相关推荐

最新文章

热门文章