那些被忽略但很好用的 Web API / DesignMode

DesignMode 讓整個網站都是你的 textarea。

今天要介紹的 API 非常簡單明瞭,簡單到有點偷懶的嫌疑了,但其實等我們連同後面兩天的內容介紹完後,今天的 DesignMode 才可以發揮它的真正實力,今天我們就先簡單暸解一下它的效果就好。


DesignMode

DesignMode 翻譯成中文就是設計模式,但要設計什麼呢?設計整個網頁。你沒聽錯,DesignMode 的設定可以讓整個網頁變成一個網頁編輯器,使用者便可以隨心所欲的修改網站中的文字。


# Document.designMode

今天最主要的 API 就這麼一個,也沒有什麼技巧可言,就是這麼一行簡單的 code:

document.designMode = "on"; // 關閉則設定成 "off"

你可以試著打開 devTool 的 Console 面板並執行上面這段指令,你就會發現你能夠自由編輯目前畫面中的所有東西,剪下、貼上、刪除、新增等等都不是問題。但你可能會想:「這到底可以幹嘛?」。

其實 DesignMode 有一個最直覺的作用,那就是讓你在開發時可以進行更即時性的文案測試,你可以直接在網頁上進行文字編輯,而不是在開發環境中修改後再到頁面上確認。或許身為前端工程師的你會覺得這項功能有點雞肋,但如果你要跟設計師溝通,或設計師想要進行調整測試時,直接打開 DesignMode 就會非常方便。



# iframe & designMode

另外,DesignMode 也不是只能運用在目前的頁面,你也可以針對頁面中的 iframe 來設定:

◾ iframe.html

<h1>I am Max.</h1>
<p>DesignMode is very fun.</p>

◾ index.html

<iframe src="./iframe.html"></iframe>
<button onClick="getHtml()">Get HTML</button>
<script>
  window.onload = function () {
    const iframeDocument = document.querySelector("iframe").contentDocument;
    iframeDocument.designMode = "on";
  };

  function getHtml() {
    const iframeDocument = document.querySelector("iframe").contentDocument;
    console.log(iframeDocument.body.innerHTML);
  }
</script>

當然了,你可能還是會問說這樣的效果可以做些什麼?但其實許多部落格或筆記網站能夠讓你在網頁中進行文字編輯,靠的就是 DesignMode,只不過它們通常都會搭配一些編輯工具,讓你可以將文字放大縮小、粗體斜體或設定顏色等等。



Contenteditable

既然剛剛講到了部落格和筆記網站,那我們就必須再額外介紹 Contenteditable,它擁有與 DesignMode 非常相像的功能,且比起 DesignMode,剛剛提到的網站可能更常用的是 Contenteditable,像是目前最火紅的 Notion 就是使用 Contenteditable。

不過 Contenteditable 其實並不是 Web API,它是 HTML5 中的一個全域屬性,只要在任何元素標籤中加上這個屬性,該元素中的內文就會變成可編輯的狀態。

<div contenteditable="true">這裡的文字可以編輯</div>

textarea 本身就是一個可編輯文本的區域沒錯,但如果你想做到像部落格一樣有文字美編功能的話,textarea 是沒辦法達成的。



其實我們已經在文章中點出了 DesignMode 的真實實力該如何發揮了,那就是透過一些手法,讓我們可以對編輯中的文字進行一些樣式的設定,如此以來 DesignMode 就會是名副其實的設計模式了。而這樣的工具,我們會在認識 Selection 與 Clipboard 之後,再來動手寫寫看。


- 此篇文章為「iT 邦幫忙鐵人賽」參賽文章,同步發表於 iT 邦幫忙 -