Cyber Coding Course

師其意,不泥其跡

介紹document.designMode

前言

document.designMode,可以控制整個document變為可編輯的。
我們透過"on"及"off"來調整。
透過document.execCommand我們能做很多事情,例如:insertText。
 

Demo

這裡簡單的示範給大家看( 11秒 ),以下示範純粹看爽的
貼入程式碼,就能對網頁,進行編輯囉,影片中我調整了「星星」數。

貼上,如下的JavaScript程式,即可修改網頁囉。
document.designMode = "on";
document.execCommand("insertText");

如果,您喜歡這個教學,請真的給D-Laravel一顆Star吧!
https://github.com/DevinY/dlaravel

再來看看更多運用吧,這是w3schools的demo,用滑鼠選取文字,再壓「shift」鈕,可讓文字變粗體。
https://www.w3schools.com/JSREF/tryit.asp?filename=tryjsref_document_execcommand
 

作者: Devin Yang