基于Web的代码编辑器 Ace的使用

简介
ACE 是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮，并能够处理代码多达400万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。
特性
- 代码高亮
- 自动缩进
- 更换主题
- 搜索和替换支持正则表达式
- 高亮选中
- 代码折叠
下载地址
- 网盘地址
  - 链接：https://pan.baidu.com/s/1v7nnF4CYJcw9m2VihSp5uw
  - 提取码：w8wx
- 官网地址和文档
  - https://ace.c9.io/
- github地址
  - https://github.com/ajaxorg/ace
使用教程

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>web编辑器</title><style type="text/css" media="screen">#box {width: 50%;height: 500px;}#editor {width: 100%;height: 100%;}.ace_print-margin {display: none;}</style>
</head><body><div id="box"><div id="editor">{"showapi_res_error": "","showapi_res_id": "7c9bf9b98da546e99e9cf500d28fc04b","showapi_res_code": 0,"showapi_res_body": {"ret_code": 0,"pagebean": {"cur_song_num": 100,"code": 0,"day_of_year": "","song_begin": 0,"totalpage": 1,"songlist": [{"albumid": 6272362,"albummid": "0005ixSf2Qclga","albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/g/a/0005ixSf2Qclga.jpg","albumpic_small": "http://i.gtimg.cn/music/photo/mid_album_90/g/a/0005ixSf2Qclga.jpg","songid": 228853305,"songname": "没有意外","singerid": 1016794,"singername": "蔡徐坤","seconds": 315,"downUrl":"http://dl.stream.qqmusic.qq.com/228853305.mp3?vkey=F3C56968E08112DB5252DFFBC1C1B90C19DA3D6489E3A5C4BCE544A71A8A24471259DF3490883C03614B03090E5BD9FFB6F2B5D4766F2399&guid=2718671044","url": "http://ws.stream.qqmusic.qq.com/228853305.m4a?fromtag=46"},{"albumid": 5868415,"albummid": "003hzX7h4Flbcb","albumpic_big": "http://i.gtimg.cn/music/photo/mid_album_300/c/b/003hzX7h4Flbcb.jpg","albumpic_small": "http://i.gtimg.cn/music/photo/mid_album_90/c/b/003hzX7h4Flbcb.jpg","songid": 225716644,"songname": "知否知否","singerid": 24833,"singername": "胡夏","seconds": 276,"downUrl":"http://dl.stream.qqmusic.qq.com/225716644.mp3?vkey=F3C56968E08112DB5252DFFBC1C1B90C19DA3D6489E3A5C4BCE544A71A8A24471259DF3490883C03614B03090E5BD9FFB6F2B5D4766F2399&guid=2718671044","url": "http://ws.stream.qqmusic.qq.com/225716644.m4a?fromtag=46"},],"total_song_num": 100,"ret_code": 0,"update_time": "2019-02-21","color": 11310461,"comment_num": 12878,"currentPage": 1},"mydata": "11111","aaaaaa": {"name": "张三","age": "30"},"url": "http://undefined"}}</div></div><!-- 主要文件 --><script src="https://cdn.bootcss.com/ace/1.4.2/ace.js"></script><!-- 用来提供代码提示和自动补全的插件 --><script src="https://cdn.bootcss.com/ace/1.4.2/ext-language_tools.js"></script><script>// ace.require("ace/ext/language_tools");// 初始化editor(）var editor = ace.edit("editor");editor.setOptions({// 默认:falsewrap: true, // 换行// autoScrollEditorIntoView: false, // 自动滚动编辑器视图enableLiveAutocompletion: true, // 智能补全enableSnippets: true, // 启用代码段enableBasicAutocompletion: true, // 启用基本完成 不推荐使用});// 设置主题  cobalt monokaieditor.setTheme("ace/theme/cobalt");// 设置编辑语言editor.getSession().setMode("ace/mode/javascript");editor.setFontSize(12);editor.setReadOnly(true)editor.getSession().setTabSize(2);// 获取编辑内容// var v = editor.getValue();// console.log(v);// 编辑内容搜索  快捷键打开->ctrl+f// editor.execCommand('find');// 设置编辑内容// var editorValue = '<h2>测试数据</h2>';// editor.setValue(editorValue);</script>
</body></html>

require("lib/ace"); ##引入
editor.setTheme("ace/theme/solarized_dark");##设置模板；引入theme-solarized_dark.js模板文件
editor.getSession().setMode("ace/mode/javascript"); ##设置程序语言模式
editor.setValue("the new text here");##设置内容
editor.getValue(); ##取值
editor.session.getTextRange(editor.getSelectionRange()); ##获取选择内容
editor.insert("Something cool"); ##在光标处插入
editor.selection.getCursor(); ##获取光标所在行或列
editor.gotoLine(lineNumber); ##跳转到行
editor.session.getLength(); ##获取总行数
editor.getSession().setTabSize(4); ##设置默认制表符的大小
editor.getSession().setUseSoftTabs(true); ##使用软标签.
document.getElementById('editor').style.fontSize='12px';  ##设置字体大小
editor.getSession().setUseWrapMode(true); ##设置代码折叠
editor.setHighlightActiveLine(false); ##设置高亮
editor.setShowPrintMargin(false); ##设置打印边距可见度
editor.setReadOnly(true); ##设置编辑器只读

事件监听

监听改变事件:

editor.getSession().on('change', function(e) {  // e.type, etc
});

监听选择事件:

editor.getSession().selection.on('changeSelection', function(e) {
});

监听光标移动:

editor.getSession().selection.on('changeCursor', function(e) {
});

基于Web的代码编辑器 Ace的使用相关推荐

N个富文本编辑器/基于Web的HTML编辑器
转自:http://www.cnblogs.com/lingyuan/archive/2010/11/15/1877447.html 基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或 ...
Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形
Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...
在线富文本编辑器-基于Web的HTML编辑器大全（一）
基于WEB的HTML 编辑器,WYSIWYG所见即所得的编辑器,或是一个富文本的编辑器,是我们在开发WEB应用和内容管理系统时接收用户输入时必需要考虑的问题.下面是网上牛人收集的一些开源的WEB在线的 ...
百度地图示例左侧的代码编辑器Ace Editor
之前用百度地图的时候,看到左侧有个代码编辑器不错,开始的时候不知道是个啥玩意,现在发现原来是个在线的代码编辑器,就像vim,sublime,只不过是在线的,有点意思.官网地址:https://ace. ...
Web 智能代码编辑器 WeBuilder 2022
面向 Web 开发人员的智能代码编辑器更快.更轻松地创建和编辑网页代码 WeBuilder 是一款面向 Web 开发人员的快速.智能且功能强大的一体化代码编辑器.干净的界面.快速启动.卓越的灵活性和 ...
代码编辑器——ace 插件
Ace 是用 JavaScript 编写的代码编辑器. react-ace 已经不被维护了,他们的团队转而开发维护更为强大的 ace-builds 了. ace 嵌入网页示例:ace-builds/e ...
PYQT5:基于QsciScintilla的代码编辑器分析1--菜单介绍（使用帮助，提供exe文件、源代码下载)
本代码编辑器实现的目标功能: 1.常用的代码编辑功能,提高编辑效率的功能,如语法高亮显示,输入自动补全(基于QsciScintilla),函数列表,函数跳转,包含文件打开. 2. 设置编译器路径,编译 ...
基于Web的Markdown编辑器HedgeDoc
什么是 HedgeDoc ? HedgeDoc 是一个开源的.基于 web 的.自托管的.协作的markdown编辑器.您可以使用它轻松地在笔记.图形甚至演示文稿上进行实时协作.用户需要做的就是将你的 ...
Ace，CodeMirror 和 Monaco：Web 代码编辑器的对比
原文链接 Replit - Ace, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser 我 ...
基于浏览器的在线代码编辑器
1. Compilr Compilr是一个在线编译器和在线IDE.可以用它来开发PHP, C, C++, Ruby.在浏览器中编译Java, C# 和 VB.net等. 马上使用 2. Dabbl ...

基于Web的代码编辑器 Ace的使用

基于Web的代码编辑器 Ace的使用相关推荐

最新文章

热门文章