specifications

In the object browsing page of data browser, click the SQL edit area at random fast (slow) speed, remember the position of the last click of the mouse, double-click the left table name (field name) automatically copy the table name (field name) to the position of the last click.

The solution

1, just go to start some detours, thought in the editor to monitor access to record the cursor position, the final focus focus events, then automatically populated when the left double click on the name to the recorded the cursor, this indeed implements the required function, but in the later test found that if the mouse to click on the edit area quickly, remember the last time the cursor position is not accurate, And there is no regularity, guess because click too fast focus monitoring event can not record the cursor position in real time.

2. CursorActivity should be used to listen for events after reviewing the official codemirror.net/ : Will be fired when the cursor or selection moves, or any change is made to the editor content. Will trigger the event. Because the official documents were all in English, it was a little difficult to look them up and took some time.

3, you can record the cursor position in real time in the cursorActivity event, no longer need to worry about the capricious fast and slow operation of the mouse, and then double click the name on the left can automatically fill the last cursor recorded position, the following part of the code snippet is for reference only, need to choose according to their own project situation.

Code snippet

In the codeEditor.vue component:

<template>
  <div class="code-editor-container">
    <textarea ref="mycode" v-model="curCode" class="code-w"></textarea>
  </div>
</template>

<script>
import CodeMirror from 'codemirror/lib/codemirror'
import "codemirror/theme/ambiance.css"
import "codemirror/lib/codemirror.css"
require("codemirror/mode/javascript/javascript");
require("codemirror/mode/sql/sql");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/addon/hint/show-hint");
require("codemirror/addon/hint/sql-hint");
import "codemirror/addon/hint/show-hint.css"
import sqlFormatter from "sql-formatter"
import bus from '@/utils/bus'

export default {
  components: {},
  data() {
    return {
      curCode: ' '.codeE: ' '.cmOptions: {
        value: ' '.mode: "text/x-mariadb".indentWithTabs: true.smartIndent: true.lineNumbers: true.autoRefresh: true.matchBrackets: true.styleActiveLine: true.lineWrapping: true.hintOptions: {
          completeSingle: false}}}},mounted() {
    this._initialize();
  },
  methods: {
    _initialize() {
      // Initializes the editor instance, passing in the text field object to be instantiated and the default configuration
      this.codeE = CodeMirror.fromTextArea(this.$refs.mycode, this.cmOptions);
      this.codeE.on('focus'.(code) = > {
        // The code to record cursor position is not written here
      });
      this.codeE.on('cursorActivity'.(e) = > {
        // console.log('eee === ', e);
        let codeData = {
          getCursor: { // Get the cursor position
            line: e.doc.getCursor().line,
            ch: e.doc.getCursor().ch
          },
          codeE: this.codeE
        };
        // console.log('codeData.getCursor === ', codeData.getCursor);
        bus.$emit('codeEditorGetCursor', codeData); })}.}}Copy the code

ObjectBrowse. Vue component:

bus.$on('codeEditorGetCursor'.(codeData) = > { // Get the editor focus
  this.codeData = codeData
});

// Double-click the event function
let pos1 = this.codeData.getCursor;
let pos2 = {};
// console.log('setCode pos1 === ', pos1);
if (pos1) {
  pos2.line = pos1.line;
  pos2.ch = pos1.ch;
  this.codeData.codeE.setCursor(pos2); // Set the cursor position
  this.codeData.codeE.replaceRange('Here's what you want to fill in.', pos2) // Replace the contents of the cursor position
}



Copy the code

At this point, implement the required requirements.

If there is infringement, please contact me to delete! Reprint please indicate the source! For learning exchange only!