vue在鼠标光标指定位置插入文字

最新推荐文章于 2024-09-14 11:43:27 发布

007。

最新推荐文章于 2024-09-14 11:43:27 发布

阅读量534

点赞数 10

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_45838276/article/details/137508694

版权

本文介绍了如何在HTML中使用el-button，当点击时通过JavaScript函数`addScriptParameters`插入或修改文本编辑器中的内容，支持根据文本选择范围或字符位置进行插入。

摘要由CSDN通过智能技术生成

1、html

<el-button type="primary" @click="addScriptParameters(item.name)">{{ item.name }}</el-button>

2、js

const addScriptParameters = (name) => {

if (name) {

const text = parameter.value.$refs.textarea

if (document.selection) {

const sel = document.selection.createRange()

sel.text = `{${name}}`

} else if (typeof text.selectionStart === 'number' && typeof text.selectionEnd === 'number') {

const startPos = text.selectionStart

const endPos = text.selectionEnd

let cursorPos = startPos

const tmpStr = dataShow.value.patter

cursorPos += name.length

dataShow.value.patter = tmpStr.substring(0, startPos) + `{${name}}` + tmpStr.substring(endPos, tmpStr.length)

text.selectionStart = text.selectionEnd = cursorPos

} else {

dataShow.value.patter += `{${name}}`

}

parameter.value.focus()

}

}