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
		    })
        }
    }
}

一、常用配置

1. 设置主题

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

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

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

3. 给编辑框赋值

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

4. 获取编辑框的值

this.aceEditor.getValue(); 

5. 获取选择内容

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

6. 设置只读

this.aceEditor.setReadOnly(true); 

7. 查找

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

8. 替换

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

9. 监听

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

10. 其他

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

11. 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官网文档