给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代码编辑器使用。
效果如下:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 百万级群聊的设计实践
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布,跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期