vue中使用contenteditable属性

文章介绍了如何利用HTML的contenteditable属性创建可编辑的元素,并在Vue框架中实现数据的变化监听。通过在div元素上设置contenteditable属性并配合blur事件,可以捕获内容修改,更新Vue的数据。然而,单纯更新数据会导致innerText与数据不同步,需要额外设置innerText以保持一致。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

contenteditable属性,可以把一个标签变为可编辑状态,完美解决了一些没必要用到input的业务场景,但在vue中,这种编辑状态没有被vue去监听到,导致值的变化并没有影响数据,这篇文章主要通过简单的方式来实现效果,涉及到业务复杂点的,可以综合一下!

如何使用

	<div contenteditable="true">我是可以编辑的div</div>

用法很简单,主要加上属性,赋值为true或者空字符就可以完成效果,如果涉及到一些二次编辑不可更改的情况,将值变为false即可。

vue中实现数据变化

作为可编辑状态,页面是可以完美更新的,所以只考虑如何更改数据即可。
由于编辑时,可以触发很多事件,例如失焦,键盘事件等,可以通过多种事件实现,具体通过实际业务。这里只介绍blur事件。

<div contenteditable="true" @blur="edit(源数据, $event)">我是可以编辑的div</div>

edit (val, e) {
	val.text = e.target.innerText
}

很简单,但是如果你用的其他方法,你会发现,当你编辑or删除的时候,你的光标会跑到文字的最前面,如果你的业务很简单,用失焦事件即可,如果还有其他要求导致用到了其他事件,那你可以参考window上的getSelection方法来重新去定你的光标。

2023-05-18 更新

使用后,发现一个问题,我的数据是更新了,但是原本的innerText还是存在,它会把两个内容合在一起,所以要加一行代码

edit (val, e) {
	val.text = e.target.innerText
	e.target.innerText = val.text
}

具体为什么出现这个问题还不清楚,找到了回来补充

### 如何在 Vue 中实现 `contenteditable` 功能 #### 使用示例和最佳实践 为了实现在 Vue 组件中使用带有 `contenteditable=true` 属性的 `<div>` 并能够监听其变化,可以采用自定义事件的方式模拟类似于 `v-model` 的双向数据绑定效果。 创建一个具有 `contenteditable` 特性的 `<div>` 元素,并通过 `$refs` 来访问 DOM 节点。当用户修改内容时触发相应的处理函数来更新组件的状态变量。下面是一个简单的例子: ```html <template> <div :id="editorId" ref="editor" class="editor" contenteditable="true" @input="updateValue"> {{ value }} </div> </template> <script> export default { props: ['value'], data() { return { editorId: 'unique-id-for-editor' }; }, methods: { updateValue(event) { this.$emit('input', event.target.innerText); } }, mounted() { // 初始化编辑器的内容 const editableDiv = this.$refs.editor; if (this.value && !editableDiv.innerHTML.trim()) { editableDiv.textContent = this.value; } } }; </script> <style scoped> .editor { min-height: 100px; border: 1px solid #ccc; padding: 8px; } </style> ``` 此代码片段展示了如何设置一个可编辑区域并将其与父级组件中的状态同步[^2]。每当用户更改该区域内文本时都会调用 `updateValue()` 方法并将新值传递给父组件。 对于更复杂的场景,比如需要支持富文本编辑,则可能还需要考虑其他因素如光标位置保存/恢复、HTML 清洗防止 XSS 攻击等问题。此时可以选择集成成熟的第三方库或插件,例如 Quill 或 TinyMCE 等[^3]。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值