pk8f3pmu2/miniprogram/account/pages/test/test.js

//miniprogram/account/pages/test/test.js
//我我我等等是顶顶顶
Page({

  /**
   * 页面的初始数据
   */
  data: {
    code: `.we-editor{
  font: 12px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  overflow: scroll;
  white-space: pre;
  cursor: text;
  height: 100vh;
  position: relative;
}
.ta{
  width: auto;
  background: #002B36;
  color: #93A1A1;
  font: 14px/normal 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
  white-space: pre;
  padding: 12px;
}
.we-cursor{
  height: 14px;
  min-height: 14px;
  width: 1px;
  position: absolute;
  font-size: 10px;
  color: white;
  background: white;
}

.theme-dark{
  background-color: #002B36;
  color: #93A1A1;
}
.we-line{
  position: absolute;
}
.we-word{
  
}
.theme-dark .we-comment{
  font-style: italic;
  color: #657B83;
}
.theme-dark .we-keyword{
  color: #859900;
}
.theme-dark .we-number{
  color: #D33682;
}
.theme-dark .we-string{
  color: #2AA198;
}
.we-chinese{
  width: 13.1953px;
  display: inline-block;
}`,
    lines: [[]],
    wordWidth: 6.59765,
    cursor: {
      row: 0,
      col: 0,
      cursor: 0,
      value: ""
    }
  },
  lines: [""],
  indent: 0,
  cursor: 0,
  getColByValue(value, cursor) {
    console.log(value, cursor);
    return value.slice(0, cursor).length * 2 - value.slice(0, cursor).replace(/[\u4e00-\u9fa5]/g, "").length;
  },

  getCursor(value, col) {
    var cursor = col;
    var newCol = this.getColByValue(value, cursor);
    while (newCol != col) {
      cursor = cursor - 1;
      newCol = this.getColByValue(value, cursor);
    }
    return cursor;
  },
  parseLine(value) {
    var line = [];
    for (var word of value.split(/([\u4e00-\u9fa5]+)/)) {
      var match = word.match(/[\u4e00-\u9fa5]+/)
        ;
      if (match) {
        for (var i of word)
          line.push({ class: "we-chinese", value: i });
      } else {
        line.push({ class: "", value: word });
      }
    }
    return line;
  },
  onInput(e) {
    console.log(e);
    let { keyCodevalue, cursor, value } = e.detail;
    console.log(e.detail)
    var row = this.data.cursor.row;
    if (value.length == 0 && this.data.cursor.row != 0) {
      var { lines } = this.data;
      lines.splice(row, 1);
      var newValue = this.lines[row - 1];
      this.setData({ lines, "cursor.row": row - 1, "cursor.col": this.getColByValue(newValue), "cursor.value": "" + newValue });
      this.lines.splice(row, 1);
      return;
    }

    this.setData({ "cursor.col": this.getColByValue(value, cursor) });
    var line = this.parseLine(value);
    this.setData({ ['lines[' + this.data.cursor.row + "]"]: line });
    this.lines[row] = value;
    var indentMatch = value.match(/(^ *)/)
    if (indentMatch)
      this.indent = indentMatch[1].length
    else
      this.indent = 0;
    this.cursor = cursor;
    //return "";
  },
  onTapEditor({ detail: { x, y } }) {
    //console.log(e);
    var row = Math.min(Math.round(y / 14), this.data.lines.length - 1);
    var value = this.lines[row];
    var col = Math.min(Math.round(x / this.data.wordWidth), this.getColByValue(value));
    this.cursor = this.getCursor(value, col);
    this.setData({ "cursor.row": row, "cursor.col": col, "cursor.focus": 1, "cursor.cursor": this.cursor, "cursor.value": value });
  },
  onInputConfirm(e) {
    //console.log(e);
    var row = this.data.cursor.row;
    var value = this.lines[row];
    var rightValue = " ".repeat(this.indent) + value.slice(this.cursor);
    var leftValue = value.slice(0, this.cursor);
    var { lines } = this.data;
    lines.splice(row + 1, 0, this.parseLine(rightValue));
    lines[row] = this.parseLine(leftValue);
    this.setData({ lines, "cursor.value": rightValue });
    this.lines.splice(row + 1, 0, rightValue);
    this.lines[row] = leftValue;
    this.setData({ "cursor.cursor": this.indent, "cursor.focus": 2, "cursor.row": row + 1, "cursor.col": this.indent });
  },
  onLoad: function (options) {

  }


})