如何在Word中批量添加填空題的下劃線？

日常工作中，經(jīng)常需要在原有的Word文檔基礎(chǔ)上，將指定內(nèi)容抹去，變成供填充內(nèi)容的下劃線，如下，將下圖中的以下所有<>及其包含的內(nèi)容替換成下劃線；

續(xù)創(chuàng)作，加速成長！這是我參與「掘金日新計(jì)劃 · 6 月更文挑戰(zhàn)」的第20天，點(diǎn)擊查看活動(dòng)詳情

本文簡介

點(diǎn)贊 + 關(guān)注 + 收藏 = 學(xué)會(huì)了

在 HTML 也好，Word 也好，基本都有下劃線和刪除線（中劃線）。

Fabric.js 作為一個(gè)老牌 canvas 庫，當(dāng)然也提供中劃線和下劃線的配置啦，除此之外還提供了上劃線的配置。

本文要講解的就是這3種裝飾線在 fabric.js 中的使用方法。除了初始化配置外，還支持項(xiàng)目運(yùn)行時(shí)，讓用戶動(dòng)態(tài)配置。

本文案例使用了 IText ，該組件支持編輯功能。

初始化時(shí)設(shè)置

這是上劃線、中劃線和下劃線的文檔：

上劃線 overline
中劃線 linethrough
下劃線 underline

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<script src="../../script/fabric.5.2.1.js"></script>
<script>
  const canvas = new fabric.Canvas('c')

  const iText = new fabric.IText('aaa',{
    styles: {
      0: {
        0: { overline: true }, // 上劃線
        1: { linethrough: true }, // 中劃線
        2: { underline: true } // 下劃線
      }
    }
  })

  canvas.add(iText)
</script>

本例只有3個(gè)字母 a ，而且都在同一行。

styles 第一個(gè)元素的 key 為 0 的意思是第一行，行號(hào)下標(biāo)從0開始。

大概這個(gè)意思

styles: {
  0: { // 第1行
    0:, // 第1行 第1個(gè)字
    1:, // 第1行 第2個(gè)字
    2:  // 第1行 第3個(gè)字
  }
}

如果需要換行，那就要根據(jù)行號(hào)來定義了。換行的方法是文本內(nèi)容里使用 \n 做換行。

動(dòng)態(tài)設(shè)置

除了在初始化時(shí)可以設(shè)置裝飾線外，F(xiàn)abric.js 也提供了在運(yùn)行時(shí)用戶手動(dòng)設(shè)置。不過代碼會(huì)稍微復(fù)雜一點(diǎn)。

其實(shí)動(dòng)態(tài)設(shè)置上劃線、中劃線和下劃線的操作都是一樣的，唯一要變的就是屬性名。

我以中劃線為例，之后上劃線和下劃線只需改個(gè)屬性名。

<button onclick="linethrough()">中劃線</button>

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<canvas id="c" width="300" height="300" style="border: 1px solid #ccc"></canvas>

<!-- 引入fabric -->
<script src="../../script/fabric.5.2.1.js"></script>
<script>
  const canvas = new fabric.Canvas('c') // 初始化畫布

  const iText = new fabric.IText('hello wor\nld') // 創(chuàng)建文字

  canvas.add(iText)

  function linethrough() {
    let activeTxt = canvas.getActiveObject() // 獲取當(dāng)前選中的文字

    // 如果當(dāng)前沒選中文字，那什么都不操作
    if (!activeTxt) return

    // 判斷當(dāng)前是否進(jìn)入編輯狀態(tài)
    if (activeTxt.isEditing) {
      // 編輯狀態(tài)
      const state = activeTxt.getSelectionStyles().find(item => item.linethrough !== true)

      // 如果當(dāng)前
      if (!state || (JSON.stringify(state) === '{}' && activeTxt['linethrough'] === true)) {
        // 如果當(dāng)前已經(jīng)設(shè)置了中劃線，那就把全局中劃線取消
        activeTxt.setSelectionStyles({ 'linethrough': false })
      } else {
        // 如果當(dāng)前沒設(shè)置中劃線，那就添加上中劃線
        activeTxt.setSelectionStyles({ 'linethrough': true })
      }
    } else {
      // 選擇狀態(tài)
      if (activeTxt['linethrough'] === true) {
        activeTxt.linethrough = false
        activeTxt.dirty = true;
        let s = activeTxt.styles
        for(let i in s) {
          for (let j in s[i]) {
            s[i][j].linethrough = false
          }
        }
      } else {
        activeTxt.linethrough = true
        activeTxt.dirty = true;
        let s = activeTxt.styles
        for(let i in s) {
          for (let j in s[i]) {
            s[i][j].linethrough = true
          }
        }
      }
    }

    canvas.renderAll()
  }
</script>

上面的代碼主要做這幾步操作：

初始化畫布
創(chuàng)建文字
將文字添加到畫布中
linethrough 方法添加或取消中劃線

最主要的操作邏輯寫在 linethrough 方法里了。

linethrough 的邏輯如下

獲取當(dāng)前選中的文字
如果沒選中就不做任何操作
如果選中了，判斷是否進(jìn)入編輯狀態(tài)
編輯狀態(tài) 獲取當(dāng)前被選中文字的中劃線狀態(tài) 如果被選中文字設(shè)置了中劃線，就把中劃線取消掉如果被選中文字沒設(shè)置中劃線，就添加中劃線
如果不是編輯狀態(tài)，只是單擊了 iText 進(jìn)入框選狀態(tài) 如果需要全局取消中劃線全局取消循環(huán)每個(gè)字符，并取消每個(gè)字符的中劃線需要全局設(shè)置中劃線全局設(shè)置再逐個(gè)字符單獨(dú)設(shè)置
重新渲染畫布