給textarea添加行號，textarea使用代碼風格的一些思考

背景

項目有個需求是 在textarea中編輯腳本並顯示為代碼風格樣式，顯示行號；

textarea顯示行號

思路：

　　1、監聽textarea內容變化，執行一個change函數，解析內容里面有多少個換行符，根據換行符數量生成一個帶行號的數組；

　　2、通過css絕對定位將行號定位在textarea左側

　　3、滑動滾動條，計算滾動條滑動的距離，賦值給行號列的top

效果：

 

並且可隨滾動條滾動，行號列跟着滾動：

代碼：

<template>
  <div class="container">
    <div class="fatherOrder">
      <div class="order" ref="order">
        <p v-for="item in numArr" :key="item">{{item}}</p>
      </div>
    </div>
    <textarea name="textarea" id="textarea" @scroll="scrollTextArea" v-model="value" @input="changeTextArea"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numArr:[],
      value:`import something form 'com'\n\n public class A{\n super()\n}`
    }
  },
  methods: {
    scrollTextArea(e){
      document.getElementsByClassName('order')[0].style.top = -e.target.scrollTop + 1 + 'px'
    },
    changeTextArea(){
      this.numArr = []
      let a = this.value
      let c = a.split('\n')
      for (let i = 1; i < c.length+1; i++) {
        this.numArr.push(i)
      }
    }
  },
  mounted() {
    document.getElementsByClassName('fatherOrder')[0].style.height = document.getElementById('textarea').offsetHeight - 2 + 'px'
    this.changeTextArea()
  }
};
</script>

顯示代碼風格

1 、網上查資料讓textarea里面的文字變色的方案，但是只支持ie；

var oFont2=document.createElement("FONT"); 
var oText2=document.createTextNode('人民'); 
oFont2.style.color="#ff3322";
form1.topic.appendChild(oFont2); 
oFont2.appendChild(oText2); 

2、通過設置div + contenteditable='true' 將div變成可編輯的塊，可以通過字符串replace方法給相應關鍵字增加顏色；但是無法監聽change事件，無法得知里面內容改變后並通知出來；

3、后面嘗試將 textarea 和  可編輯的div 定位在一個位置，設置textarea層級高於可編輯的div並將textarea隱藏，這樣顯示的是可編輯的div，實際上操作的是textarea；雖然可以做到修改textarea，通過字符串替換給關鍵字添加顏色，回顯到可編輯的div上；但操作時鼠標不見了，被div覆蓋了，無法選取div上的內容；

4、最終完美的解決方案還是引入了插件 ace-editor代碼編輯器使用。

效果如下：