vue uses the Ace Editor to implement functions such as formatting code, downloading, copying, searching, and replacing

vue uses the Ace Editor to implement functions such as formatting code, downloading, copying, searching, and replacing

  • Preface
  • 1. What is Ace Editor?
  • 2. Usage steps
    • 1.Installation
    • 2. Package components
    • 3. Page introduction
  • 3. Functions such as formatting, downloading, copying, searching, and replacing
    • 1. Organize the format
    • 2.Download
    • 3.Copy
    • 3.Search
    • 4. Replacement
  • Summarize

Foreword

Since our company wants to build a local postman and more powerful api testing tool in the intranet to test api projects, we collected a variety of mainstream apifox, apifox and other similar projects on the market. But if you want to arrange it, you need to use moeny, so you have a big job.
ace Editor

Below are some functions implemented by vue2-ace-editor that I used in the project, as shown in the picture above.

1. What is Ace Editor?

Ace is an embeddable code editor written in JavaScript. It works with Sublime, Vim and TextMate

Wait for the functionality and performance of the native editor to match. It can be easily embedded into any web page and JavaScript application. Ace is maintained as the main editor for Cloud9IDE and is the successor to the Mozilla Skywriter (Bespin) project.

2. Usage steps

1.Installation

The code is as follows (example):

npm install --save-dev vue2-ace-editor

2. Encapsulation components

The code is as follows (example):

<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>
//Introduce vue2-ace-editor
import aceEditor from 'vue2-ace-editor'
//Introduce ace for subsequent modification of custom tags
import ace from 'brace'
//Code tips
import 'brace/ext/language_tools'
import 'brace/mode/javascript'
import 'brace/snippets/javascript'
//search
import 'brace/ext/searchbox'
//theme
//White background color with highlight
import 'brace/theme/chrome'
//Black text on white background without highlighting
import 'brace/theme/github'
//Black background color
import 'brace/theme/tomorrow_night_eighties'
//Blue background color
import 'brace/theme/tomorrow_night_blue'
//Black background color
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',//Language
        enableBasicAutocompletion: true,//Start code completion function
        enableSnippets: true,//Start code snippets
        showPrintMargin: false,//Show printing margins
        fontSize: this.config.fontSize,//Font size
        enableLiveAutocompletion: true,//Enable real-time automatic completion
        readOnly: this.readOnly//Read only
      }
    }
  },
  methods: {<!-- -->
    initEditor(editor) {<!-- -->
      //custom label
      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)
      // Monitor value changes
      editor.getSession().on('change', () => {<!-- -->
        this.$emit('change', editor.getValue())
      })
    },
    getValue() {<!-- -->//Get the value
      return this.$refs.editor.editor.getValue()
    },
    setValue(value) {<!-- -->//Assignment
      this.$refs.editor.editor.session.setValue(value)
    },
    clear() {<!-- -->//Clear
      this.$refs.editor.editor.session.setValue('')
    },
    setCompleteData (editor, session, pos, prefix, callback) {<!-- -->
       const data = [
       {<!-- --> meta: 'method name', caption: 'get', value: 'function get(){}', score: 1 },
        {<!-- --> meta: 'method name', caption: 'set', value: 'function set(){}', score: 2 }
       ]
       if (prefix.length === 0) {<!-- -->
           return callback(null, [])
       } else {<!-- -->
           return callback(null, data)
       }
     }
  }
}
</script>

3. Page introduction

<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:'Test ace editor',
      theme:'tomorrow_night_blue'
    }
  }
}
</script>

3. Organize formatting, download, copy, search, replace and other functions

1. Organize the format

The lang in the above options can change the format information you need, such as: json, xml, etc.
But their format content needs to be imported. Only by importing can the format be changed.

import 'brace/mode/javascript'
import 'brace/mode/json'
import 'brace/mode/xml'

options() {<!-- -->
  return {<!-- -->
    lang:'javascript',//Language
    // lang:'json', // json
    // lang:'xml', // xml
  }
}

Because this project only uses json and xml, only two types are described below.

// json formatting value is the value in the editor
const string = JSON.stringify(JSON.parse(value),null,2)

// xml formatting Here we introduce an xml-beautifier library to organize xml format content
npm install xml-beautifier --save

import xmlBeautifier from 'xml-beautifier'
// value must be in xml format
const string = xmlBeautifier(value)

The above method is to organize the content of the format, personal test

2.Download

// code is the value
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.Copy

//Use clipboard library
npm install clipboard --save

<el-button type="success" class="copy-qb" @click="copyQbUrl(scope.row.documentPath)" >Copy link</el-button>

copyQbUrl(url) {<!-- -->
  let clipboard = new Clipboard('.copy-qb', {<!-- -->
    text: () => {<!-- -->
      return url
    }
  })
  clipboard.on('success', () => {<!-- -->
    this.$message.success('Copy successfully!')
    clipboard.destroy()
  })
  clipboard.on('error', () => {<!-- -->
    this.$message.error('This browser does not support automatic copying, please copy manually!')
    clipboard.destroy()
  })
}

3.Search

//Reference his own module method
 this.$refs.editor.editor.execCommand('find')

4. Replacement

//Reference his own module method
 this.$refs.editor.editor.execCommand('replace')

Summary

This is what is used in the current project. Of course, there are still many powerful functions that have not been used. If you still have any questions that you don’t understand, you can always add me on WeChat x79818253