Vue中实现div编辑效果，及contenteditable设置为plaintext-only与true的区别

有时候我们希望实现点击一段div内文本时就能直接进行编辑，当然使用文本框、富文本等也可以实现，但终究有些麻烦。

效果预览

参数介绍

封装与使用

使用效果差异

plaintext-only 的效果

使用contenteditable = "true" 的效果

效果预览

今天我给大家介绍的这种方式是直接使用div的 contenteditable 属性，即可实现div的文本编辑效果。

参数介绍

首先介绍一下 contenteditable 属性，一般情况下使用的是 true 和 false （允许编辑与不可编辑），因为看了一篇文章详细介绍的时候提到了谷歌可以实现纯文本输入的方式，所以以上是使用了 plaintext-only 。

封装与使用

现在直接贴出我写好的组件代码吧，要讨论使用 true 和 plaintext-only 的区别，感兴趣的朋友可以在最后查看。

封装的组件：ytDivEdit

<template><div class="yt-div-edit"contenteditable="plaintext-only"@input="changeDivText($event)"@focus="divFocus"@blur="divBlur"v-html="value">{{value}}</div>
</template><script>export default {name: 'ytDivEdit',data() {return {editText: ""}},props: {value: {type: String,default: ""}},created() {this.editText = this.value},methods: {// 文本改变时事件changeDivText(event) {this.editText = event.target.innerHTML},divFocus() {this.editText = this.value},divBlur() {this.$emit("input", this.editText)}}}
</script>

以上代码思路毕竟直观，通过绑定三个事件，其中@input事件是每一次输入时都会有响应的，所以我使用了一个内部变量editText来存储；当得到焦点时，将外部的值赋值到内部变量；而在失去焦点时，才一次性地把输入的内容抛出事件以更新绑定值。

其中注意的是@input事件需要用到 $event 来捕捉事件，这样能够得到直接得到输入的内容。

使用，其中的 description 就是与之绑定的变量

<yt-div-edit class="description" v-model="description"></yt-div-edit>

如果需要改成 true，那么直接在上面第3行中修改就可以了。

使用效果差异

这里只写true 和 plaintext-only，其他的留给大家去探讨哈。

plaintext-only 的效果

使用 plaintext-only 的使用，所保存的内容比较简单，仅保留文本，换行是以回车符的形式保存。

后端返回的换行是以\n作为转义符换行

使用contenteditable = "true" 的效果

此处特地粘贴了一个带有底纹样式的内容在上面，我们会发现在保存时，会连带样式代码也一起保留在里面了。

因为太长了这里贴出来给大家看看

前端传递：
description: "我现在来测试一下使用div编辑框的效果&nbsp;<div>使用div编辑的好处是可以直接点击文本就进行修改，换行的内容则以回车的形式保存</div><div><br></div><div>现在是直接使用<span style="background-color: rgb(246, 246, 246); color: rgb(51, 51, 51); font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; font-size: 13px;">contenteditable="true"的形式</span></div>"后端返回：
"description":"我现在来测试一下使用div编辑框的效果&nbsp;<div>使用div编辑的好处是可以直接点击文本就进行修改，换行的内容则以回车的形式保存</div><div><br></div><div>现在是直接使用<span style=\"background-color: rgb(246, 246, 246); color: rgb(51, 51, 51); font-family: Consolas, Monaco, &quot;Andale Mono&quot;, &quot;Ubuntu Mono&quot;, monospace; font-size: 13px;\">contenteditable=\"true\"的形式</span></div>"

使用true时，换行是通过新建一个div来实现的，如果是间隔空行，则以 br 来填充。

另外，可以直接可以直接复制粘贴带样式的html代码，也就是可以保留一定的样式效果，但是代码就比较长了咯。其实这里还有一点不太方便的地方，就是复制的样式带有一定的黏性，即使换行了还会依然保留。

至于以上的问题需要如何解决，请点击下方的参考链接。

参考链接：

https://blog.csdn.net/z736248591/article/details/88083366

https://my.oschina.net/u/3680343/blog/1588420