给textarea添加行号，textarea使用代码风格的一些思考

Posted 2021-06-02 xingba-coder

背景

项目有个需求是 在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代码编辑器使用。

效果如下：