Ace editor中文文档

介绍

Ace是一个用JavaScript编写的可嵌入代码编辑器。它与Sublime，Vim和TextMate等本地编辑器的功能和性能相匹配。它可以轻松地嵌入任何网页和JavaScript应用程序中。

官网地址：Ace - The High Performance Code Editor for the Web
Github: GitHub - ajaxorg/ace: Ace (Ajax.org Cloud9 Editor)
vue版：GitHub - chairuosen/vue2-ace-editor

快速开始

简单使用

<div id="editor" style="height: 500px; width: 500px">some text</div> <script src="src/ace.js" type="text/javascript" charset="utf-8"></script> <script> var editor = ace.edit("editor"); </script>

设置主题和语言模式

要更改主题，请为编辑器配置要使用的主题路径。主题文件将按需加载：

editor.setTheme("ace/theme/twilight");

默认情况下，编辑器为纯文本模式。但是，所有其他语言模式都可以作为单独的模块使用。语言模式也将按需加载：

editor.session.setMode("ace/mode/javascript");

编辑器状态

Ace将所有编辑器状态（选择，滚动位置等）保留在editor.session中, 这对于制作可切换式编辑器非常有用：

var EditSession = require("ace/edit_session").EditSession var js = new EditSession("some js code") var css = new EditSession(["some", "css", "code here"]) // 要将文档加载到编辑器中，只需这样调用 editor.setSession(js)

在项目中配置Ace

// 将代码模式配置到ace选项 ace.edit(element, { mode: "ace/mode/javascript", selectionStyle: "text" }) // 使用setOptions方法一次设置多个选项 editor.setOptions({ autoScrollEditorIntoView: true, copyWithEmptySelection: true, }); // 单独设置setOptions方法 editor.setOption("mergeUndoDeltas", "always"); // 一些选项也直接设置，例如： editor.setTheme(...) // 获取选项设置值 editor.getOption("optionName"); // 核心Ace组件包括（editor, session, renderer, mouseHandler） setOption(optionName, optionValue) setOptions({ opt