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