- “插入自定義標簽是什么鬼？”

- “比如你要插入一個的標簽...”

- “什么情況下會有這種需求？”

- “得罪了產品的情況下...”

一、需求背景

某天，產品找到我，發生了如下對話

PM：“哇，研發小哥哥你今天好帥啊～”

我：“說人話。”

PM：“我有一個需求。”

我：“我不聽。”

PM：“我們要給用戶發送模版消息。”

我：“找后端小姐姐啊。”

PM：“后端小姐姐讓你在編輯這個字段的時候，標記對應的模版詞組。”

我：“怎么標記？”

PM：“然后我希望在刪除這個模版詞組的時候，可以整個刪除。”

我：“怎么刪除？！”

PM：“整個刪除。”

我：(打開抽屜，亮出我的四十米長刀)

PM：(楚楚可憐的看著我)

我：“做不了。”

PM：(伸出一根手指)

我：“這需求我接了。”

十年后...

二、輸入功能實現

為了實現這個功能，我最先想的是改造一個

然后我想到了(鏈接指向 mozilla.org)這一屬性

這是一個 html5 的屬性，可以讓元素內容可編輯

這是一個可編輯的段落。

但這樣改造之后的輸入框，在粘貼的時候會帶上文本格式，即富文本

所以最后我放棄了該屬性，采用 CSS 的解決方案：

這個屬性有四個可選值：

read-only：默認值，元素只讀，不可編輯；

read-write：可以編輯，支持富文本；

read-write-plaintext-only：可以編輯，不支持富文本；

write-only：使元素僅用于編輯(幾乎沒有瀏覽器支持)

所以最后我給輸入框添加了這樣一行 CSS 屬性：

-webkit-user-modify: read-write-plaintext-only !important;

三、實現單向綁定

一個常規的輸入框組件，父組件可以通過 v-model 指令雙向綁定數據

v-model 其實是一個語法糖，它向子組件傳遞一個 value 屬性，并接收一個 input 事件

所以對于父組件來說：

等價于：

而子組件為了支持 v-model，需要在 props 里定一個 value 屬性

并且在合適的時候觸發?this.$emit('input', value)

在這個 tag-textarea 組件中，我在輸入框上監聽 input 事件，獲取元素內的 innerHTML，并暴露給父組件

到這里，還僅僅實現了單項綁定——子組件的值改變時，父組件的值隨之改變

要實現真正意義上的雙向綁定，還有一段路要走

四、完成雙向綁定

首先需要在 data 定義一個?currentText

如果是普通的輸入框，直接在輸入框元素上使用 v-text="currentText"

然后在 watch 中監聽 value 的變化，實時更新 currentText，就能實現雙向綁定

但這個 textarea 返回的是 html，v-text 是不能用了

如果用 v-html 的話，在輸入的時候，光標會一直跳到最前方，最后我采用了以下方案：

在 data 添加一個 isLocked 用于記錄鎖定狀態

在 mounted() 的時候，通過 dom 操作初始化數據

在聚焦和失焦的時候修改鎖定狀態

看，很簡單吧，沒有人會受傷的世界一個基本的 textarea，完成了

五、插入標簽

創建標簽并不難，可如何讓這個標簽插入到光標所在的位置？

于是 Selection 對象閃亮登場，它記錄了拖藍的文本范圍，或插入符號的當前位置

通過 Selection 對象可以獲取到 Range 對象，然后使用?Range.insertNode()方法，在目標位置插入標簽

在 mounted() 中監聽 selectionchange 事件，添加對應的處理函數，并在 beforeDestroy() 的時候卸載

在處理函數中，記錄當前的 range

添加標簽的時候，首先通過?document.createElement() 創建標簽，然后插入節點

六、刪除標簽

刪除分為光標位于標簽外和標簽內兩種情況

首先是當光標在標簽外的時候，有一個取巧的辦法

給模版標簽添加樣式，將?-webkit-user-modify 設置為 read-only

這樣在刪除的時候，因為無法編輯，就會直接刪除整個 dom 節點

當光標位于標簽內的時候，會稍微復雜一點

首先需要監聽 click 事件，當點擊模版標簽的時候，記錄其 id

然后監聽?keydown.delete 事件，如果選中了標簽，就使用 removeChild() 刪除標簽

以上，就已經滿足了產品的基本需求

不過既然是開發組件，就需要做一些適合組件開發的優化

比如 props 、slot 、 css樣式等，這里就不多贅述了

最后，元旦快樂～

總結

以上是生活随笔為你收集整理的往写好的html插入标签,写一个可插入自定义标签的 Textarea 组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。