- “插入自定義標籤是什麼鬼？”

- “比如你要插入一個<wise></wise>的標籤...”

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

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

一、需求背景

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

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

我：“說人話。”

PM：“我有一個需求。”

我：“我不聽。”

PM：“我們要給使用者傳送模版訊息。”

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

PM：“後端小姐姐讓你在編輯這個欄位的時候，標記對應的模版片語。”

我：“怎麼標記？”

PM：“然後我希望在刪除這個模版片語的時候，可以整個刪除。”

我：“怎麼刪除？！”

PM：“整個刪除。”

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

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

我：“做不了。”

PM：(伸出一根手指)

我：“這需求我接了。”

十年後...

倉庫地址：https://github.com/wisewrong/vue-tag-textarea

二、輸入功能實現

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

然後我想到了 contenteditable (連結指向 mozilla.org) 這一屬性

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

<p contenteditable="true">這是一個可編輯的段落。</p>

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

所以最後我放棄了該屬性，採用 CSS 的解決方案：-webkit-user-modify

這個屬性有四個可選值：

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樣式等，這裡就不多贅述了

最後，元旦快樂～