ACE编辑器ace-editor笔记

<template><div class="ace-editor" ref="ace"></div>
</template>

<script>
import ace from 'ace-builds'
import 'ace-builds/webpack-resolver' // 在 webpack 环境中使用必须要导入
import 'ace-builds/src-noconflict/theme-chrome' // 默认设置的主题
import 'ace-builds/src-noconflict/mode-html' // 默认设置的语言模式
import 'ace-builds/src-noconflict/ext-language_tools'
export default {...mounted () {this.initEditor()}methods: {initEditor() {this.aceEditor = ace.edit(this.$refs.ace, {maxLines: this.maxLines, // 最大行数，超过会自动出现滚动条minLines: this.minLines, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小fontSize: this.fontSize, // 编辑器内字体大小theme: this.themePath, // 默认设置的主题mode: this.modePath + this.mode, // 默认设置的语言模式tabSize: 4 // 制表符设置为 4 个空格大小})this.aceEditor.setOptions({enableSnippets: true,enableLiveAutocompletion: true,enableBasicAutocompletion: true})}}
}

一、常用配置

设置主题

this.aceEditor.setTheme("ace/theme/eclipse");

设置编辑的语言，这里是要编辑xml

this.aceEditor.getSession().setMode("ace/mode/xml");

给编辑框赋值

this.aceEditor.setValue('hello world');

获取编辑框的值

this.aceEditor.getValue();

获取选择内容

this.aceEditor.session.getTextRange(editor.getSelectionRange());

设置只读

this.aceEditor.setReadOnly(true);

查找

this.aceEditor.find('needle',{ //needle,要查找的字符串或正则表达式backwards: false,//是否反向搜索，默认为falsewrap: false,//搜索到文档底部是否回到顶端，默认为falsecaseSensitive: false,//是否匹配大小写搜索，默认为falsewholeWord: false,//是否匹配整个单词搜素，默认为falseregExp: false//搜索内容是否是正则表达式，默认为false
});
this.aceEditor.findNext(); //查找下一个
this.aceEditor.findPrevious(); //查找上一个
this.aceEditor.find('world');

替换

this.aceEditor.replace('bar');
this.aceEditor.replaceAll('bar');

监听

this.aceEditor.getSession().on('change', function(e) {});// 监听改变事件
this.aceEditor.getSession().selection.on('changeSelection', function(e) {});// 监听选择事件
this.aceEditor.getSession().selection.on('changeCursor', function(e) {});// 监听光标移动

其他

this.aceEditor.insert("Something cool");//在光标处插入:
this.aceEditor.selection.getCursor(); //获取光标所在行或列:
this.aceEditor.gotoLine(2);//跳转到行
this.aceEditor.session.getLength();//获取行数

editor.setOption来设置配置项

– editor选项

选项名	值类型	默认值	可选值	备注
selectionStyle	String	text	line\|text	选中样式
highlightActiveLine	Boolean	true	-	高亮当前行
highlightSelectedWord	Boolean	true	-	高亮选中文本
readOnly	Boolean	false	-	是否只读
cursorStyle	String	ace	ace\|slim\|smooth\|wide	光标样式
mergeUndoDeltas	String\|Boolean	false	always	合并撤销
behavioursEnabled	Boolean	true	-	启用行为
wrapBehavioursEnabled	Boolean	true	-	启用换行
autoScrollEditorIntoView	Boolean	false	-	启用滚动
copyWithEmptySelection	Boolean	true	-	复制空格
useSoftTabs	Boolean	false	-	使用软标签
navigateWithinSoftTabs	Boolean	false	-	软标签跳转
enableMultiselect	Boolean	false	-	选中多处

– renderer选项

选项名	值类型	默认值	可选值	备注
hScrollBarAlwaysVisible	Boolean	false	-	纵向滚动条始终可见
vScrollBarAlwaysVisible	Boolean	false	-	横向滚动条始终可见
highlightGutterLine	Boolean	true	-	高亮边线
animatedScroll	Boolean	false	-	滚动动画
showInvisibles	Boolean	false	-	显示不可见字符
showPrintMargin	Boolean	true	-	显示打印边距
printMarginColumn	Number	80	-	设置页边距
printMargin	Boolean\|Number	false	-	显示并设置页边距
fadeFoldWidgets	Boolean	false	-	淡入折叠部件
showFoldWidgets	Boolean	true	-	显示折叠部件
showLineNumbers	Boolean	true	-	显示行号
showGutter	Boolean	true	-	显示行号区域
displayIndentGuides	Boolean	true	-	显示参考线
fontSize	Number\|String	inherit	-	设置字号
fontFamily	String	inherit		设置字体
maxLines	Number	-	-	至多行数
minLines	Number	-	-	至少行数
scrollPastEnd	Boolean\|Number	0	-	滚动位置
fixedWidthGutter	Boolean	false	-	固定行号区域宽度
theme	String	-	-	主题引用路径，例如"ace/theme/textmate"

– mouseHandler选项

选项名	值类型	默认值	可选值	备注
scrollSpeed	Number	-	-	滚动速度
dragDelay	Number	-	-	拖拽延时
dragEnabled	Boolean	true	-	是否启用拖动
focusTimout	Number	-	-	聚焦超时
tooltipFollowsMouse	Boolean	false	-	鼠标提示

– session选项

选项名	值类型	默认值	可选值	备注
firstLineNumber	Number	1	-	起始行号
overwrite	Boolean	-	-	重做
newLineMode	String	auto	auto\|unix\|windows	新开行模式
useWorker	Boolean	-	-	使用辅助对象
useSoftTabs	Boolean	-	-	使用软标签
tabSize	Number	-	-	标签大小
wrap	Boolean	-	-	换行
foldStyle	String	-	markbegin\|markbeginend\|manual	折叠样式
mode	String	-	-	代码匹配模式，例如“ace/mode/text"

– 扩展选项

选项名	值类型	默认值	可选值	备注
enableBasicAutocompletion	Boolean	-	-	启用基本自动完成
enableLiveAutocompletion	Boolean	-	-	启用实时自动完成
enableSnippets	Boolean	-	-	启用代码段
enableEmmet	Boolean	-	-	启用Emmet
useElasticTabstops	Boolean	-	-	使用弹性制表位

二、禁用特定的ACE编辑器CSS模式警告规则

const INFO_RULES = [// Disable Heading (h2) has already been defined. warning'unique-headings',// Disable Heading (h2) should not be qualified. warning'qualified-headings','fallback-colors'
];
const DISABLED_RULES = [// Disable Don't use adjoining classes. warning'adjoining-classes',// Disable Rule doesn't have all its properties in alphabetical ordered. warning'order-alphabetical'
];
// 调用
this.aceEditor.session.$worker.call('setInfoRules', [INFO_RULES.join('|')]) ;
this.aceEditor.session.$worker.call('setDisabledRules', [DISABLED_RULES.join('|')]) ;
或者直接填写以‘|’分隔
this.aceEditor.session.$worker.call('setDisabledRules', ['box-sizing|ids|order-alphabetical|universal-selector|fallback-colors|box-model|adjoining-classes|order-alphabetical|unique-headings|qualified-headings'])

Ace Editor官网文档

ACE编辑器ace-editor笔记相关推荐

Linux环境使用ACE编辑器,Ace Editor 在线代码编辑器搭建
Ace是一个功能非常强大的编辑器.它实现了语法着色,缩进,代码提示功能.且具有大量的主题,支持大量语言.但是Ace的文档基本上是英文的. 先展示下Ace的例子. 下面介绍下如何实现其功能. 下载 Ac ...
WEB端代码文本编辑器ACE的使用指南（附代码）
快速导航一.ACE的介绍二.快速开始 1. package.json引入ace-builds 2. vue页面引入相应script 3. 初始化ace编辑器 4.展示效果三.进阶使用 1. 代码 ...
html ace编辑器,Springboot 集成 Ace editor前端编辑器
一.引入Ace editor 本质上Ace editor只是一个js而已.而该js引用了其他js(如扩展.主题等js),因此将ace editor.js引入项目时最好复制整个文件夹,不能只复制一个ac ...
ACE编辑器是什么？
介绍 Ace是一个开源的项目 https://github.com/ajaxorg/ace, Ace一直是 Cloud9 IDE 的主要编辑器,并且是 Mozilla Skywriter(Bespin ...
Sense编辑器(Sense Editor)
Sense编辑器(Sense Editor) 学习了:https://blog.csdn.net/AbnerGong/article/details/50776605 Sense是一个方便的控制台,用 ...
第一次使用最新开发的在线编辑器讲课记录笔记
2019独角兽企业重金招聘Python工程师标准>>> 第一次使用最新开发的在线编辑器讲课记录笔记,效果: 信息地址: http://www.phpkhbd.com/note/93 ...
第一款Micropython图形化编辑器—Python Editor
2019独角兽企业重金招聘Python工程师标准>>> 当你看到这篇文章的时候,显然你已经阅读了很多类似的文章,那么本篇文章会深入讲解一些新手的需求,提供详细的建议,当然我不会告诉你 ...
怎么在添加为知笔记编辑器/为知笔记怎么用其他编辑器编辑/为知笔记怎么才能用Word/notepad++编辑
1.为什么要添加外部编辑器为知笔记自身提供了基础的编辑功能,足够满足一般用户的笔记需要.但有的用户有特殊的需求,需要编辑很多特殊格式与内容的文档.这时候一方面可以采取先用其他编辑器如Word.VIM ...
图形编辑器——Graph Editor（树图必备）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言使用步骤前言图形编辑器--Graph Editor 可以用用来生成树,且可以标记边的权重告别word.visio ...

ACE编辑器ace-editor笔记

一、常用配置

二、禁用特定的ACE编辑器CSS模式警告规则

ACE编辑器ace-editor笔记相关推荐

最新文章

热门文章