vue 使用Ace Editor 编辑器 实现 格式化代码、下载、复制、搜索、替换等功能_vue2-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
1

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

---

三、整理格式、下载、复制、搜索、替换等功能

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
  }
}
1
2
3
4
5
6
7
8
9
10
11

因为本项目只是使用了 json 和xml 所以以下只讲述两种

// json 整理格式 value 是编辑器中的值
const string = JSON.stringify(JSON.parse(value),null,2)
1
2

// xml 整理格式  这边引入了一个 xml-beautifier的库来整理xml格式内容
npm install xml-beautifier --save

import xmlBeautifier from 'xml-beautifier' 
// value 必须是xml格式
const string = xmlBeautifier(value)
1
2
3
4
5
6

以上方法就是整理格式的内容,亲测

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);
1
2
3
4
5
6
7
8
9

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

3.搜索

// 引用他本身的模块方法
 this.$refs.editor.editor.execCommand('find')
1
2

4.替换

// 引用他本身的模块方法
 this.$refs.editor.editor.execCommand('replace')
1
2

总结

这就是目前项目中所使用到的东西,当然还有很多的强大的功能没有使用,如果你还有什么不懂的问题,可以随时加我微信 x79818253