vue使用Ace Editor 编辑器 实现 格式化代码、下载、复制、搜索、替换等功能
前言
由于我司想要在内网中搭建一个本地的postman且更强大的api测试工具,用来测试api 的项目,于是搜集了在市面上目前有多款主流 apifox 、 apifox等多种类似的项目,但是想要布置的话,都需要用到moeny,于是有大活了
下面讲的是我在项目中使用到的vue2-ace-editor实现的一些功能,如上图所示.
一、Ace Editor 是什么?
Ace 是一个用 JavaScript 编写的可嵌入代码编辑器。它与 Sublime、Vim 和 TextMate
等原生编辑器的功能和性能相匹配。它可以很容易地嵌入到任何网页和 JavaScript 应用程序中。Ace 被维护为Cloud9IDE的主要编辑器 ,并且是 Mozilla Skywriter (Bespin) 项目的继承者。
二、使用步骤
1.安装
代码如下(示例):
npm install --save-dev vue2-ace-editor
2.封装组件
代码如下(示例):
<template>
<div class="codeEditBox" :style="{height: height + 'px'}">
<aceEditor ref="editor" :value="value" :lang="options.lang" :theme="theme"
:options="options" @init="initEditor" v-bind="config">
</aceEditor>
</div>
</template>
<script>
//引入vue2-ace-editor
import aceEditor from 'vue2-ace-editor'
//引入ace 后续修改自定义标签用到
import ace from 'brace'
//代码提示
import 'brace/ext/language_tools'
import 'brace/mode/javascript'
import 'brace/snippets/javascript'
//搜索
import 'brace/ext/searchbox'
//主题
//白底色 带高亮
import 'brace/theme/chrome'
//白底色黑字 不带高亮
import 'brace/theme/github'
//黑底色
import 'brace/theme/tomorrow_night_eighties'
//蓝底色
import 'brace/theme/tomorrow_night_blue'
//黑底色
import 'brace/theme/vibrant_ink'
export default {
name: 'Editor',
components: {
aceEditor
},
props: {
value: {
type: String,
default: ''
},
height: {
type: Number,
default: 300
},
readOnly: {
type: Boolean,
default: false
},
theme: {
type: String,
default: 'chrome'
},
config: {
type: Object,
default: () => {
return {
fontSize: 16
}
}
}
},
computed: {
options() {
return {
lang:'javascript',//语言
enableBasicAutocompletion: true,//启动代码补全功能
enableSnippets: true,//启动代码段
showPrintMargin: false,//显示打印边距
fontSize: this.config.fontSize,//字体大小
enableLiveAutocompletion: true,//启用实时自动完成
readOnly: this.readOnly//只读
}
}
},
methods: {
initEditor(editor) {
//自定义标签
const that = this
const completer = {
getCompletions: function (editors, session, pos, prefix, callback) {
that.setCompleteData(editors, session, pos, prefix, callback)
}
}
const lnTools = ace.acequire('ace/ext/language_tools')
lnTools.addCompleter(completer)
// 监听值的变化
editor.getSession().on('change', () => {
this.$emit('change', editor.getValue())
})
},
getValue() {//获取值
return this.$refs.editor.editor.getValue()
},
setValue(value) {//赋值
this.$refs.editor.editor.session.setValue(value)
},
clear() {//清空
this.$refs.editor.editor.session.setValue('')
},
setCompleteData (editor, session, pos, prefix, callback) {
const data = [
{ meta: '方法名', caption: 'get', value: 'function get(){}', score: 1 },
{ meta: '方法名', caption: 'set', value: 'function set(){}', score: 2 }
]
if (prefix.length === 0) {
return callback(null, [])
} else {
return callback(null, data)
}
}
}
}
</script>
3.页面引入
<template>
<div id="app">
<Acescript :value=value :theme=theme :readOnly=false></Acescript>
</div>
</template>
<script>
import Acescript from './components/AceJavascripttest'
export default {
name: 'App',
components:{
Acescript,
},
data() {
return {
value:'测试ace编辑器',
theme:'tomorrow_night_blue'
}
}
}
</script>
三、整理格式、下载、复制、搜索、替换等功能
1.整理格式
上述的options中的lang,可以更改你需要的格式信息,比如: json、xml等
但是需要引入他们的格式内容,只有引入才能更换格式
import 'brace/mode/javascript'
import 'brace/mode/json'
import 'brace/mode/xml'
options() {
return {
lang:'javascript',//语言
// lang:'json', // json
// lang:'xml', // xml
}
}
因为本项目只是使用了 json 和xml 所以以下只讲述两种
// json 整理格式 value 是编辑器中的值
const string = JSON.stringify(JSON.parse(value),null,2)
// xml 整理格式 这边引入了一个 xml-beautifier的库来整理xml格式内容
npm install xml-beautifier --save
import xmlBeautifier from 'xml-beautifier'
// value 必须是xml格式
const string = xmlBeautifier(value)
以上方法就是整理格式的内容,亲测
2.下载
// code 是值
const a = document.createElement('a');
const blob = new Blob([code]);
const url = window.URL.createObjectURL(blob);
const filename = `download.txt`;
a.href = url;
a.download = filename;
a.click();
window.URL.revokeObjectURL(url);
3.复制
// 使用clipboard 库
npm install clipboard --save
<el-button type="success" class="copy-qb" @click="copyQbUrl(scope.row.documentPath)" >复制链接</el-button>
copyQbUrl(url) {
let clipboard = new Clipboard('.copy-qb', {
text: () => {
return url
}
})
clipboard.on('success', () => {
this.$message.success('复制成功!')
clipboard.destroy()
})
clipboard.on('error', () => {
this.$message.error('该浏览器不支持自动复制,请手动复制!')
clipboard.destroy()
})
}
3.搜索
// 引用他本身的模块方法
this.$refs.editor.editor.execCommand('find')
4.替换
// 引用他本身的模块方法
this.$refs.editor.editor.execCommand('replace')
总结
这就是目前项目中所使用到的东西,当然还有很多的强大的功能没有使用,如果你还有什么不懂的问题,可以随时加我微信 x79818253