HTML5 - 使某個頁面元素或整個頁面可編輯

1，把任何元素的contenteditable屬性設定成true，點選即可以編輯該元素的内容

<div id="editableDiv" style="width:240px;height:100px;background-color:#FEFFCE"
    contenteditable="true">
    你可以編輯這段文本
</div>
           

2，也可以使用js來動态的開啟和關閉編輯功能

<script>
    //讓元素可以編輯
    function startEdit(){
        var element = document.getElementById("editableDiv");
        element.contentEditable = true;
    }

    //讓元素恢複正常狀态
    function stopEdit(){
        var element = document.getElementById("editableDiv");
        element.contentEditable = false;
        //顯示出編輯後的内容
        alert("目前内容是："+ element.innerHTML);
    }
</script>
<div id="editableDiv" style="width:240px;height:100px;background-color:#FEFFCE">
    你可以編輯這段文本
</div>
<button onclick="startEdit()">開始編輯</button>
<button onclick="stopEdit()">停止編輯</button>
           

3，使用designMode編輯整個頁面

如果讓整個頁面都可以編輯，那麼頁面上的按鈕事件也會失效。是以通常會把要編輯的文檔放在一個

<iframe>

元素中，而這個元素就充當了一個超級的編輯框。

下面樣例是點選“開始”則可以編輯iframe裡加載的網頁。點選“停止”後，iframe裡的頁面退出設計模式變為不可編輯，同時下方div顯示頁面編輯後的html代碼。

（注意：iframe加載的頁面要在同一個域下才能編輯）

<script>
    //讓iframe轉為設計模式
    function startEdit(){
        var editor = document.getElementById("pageEditor");
        editor.contentWindow.document.designMode = "on";
    }

    //讓iframe設計模式關閉
    function stopEdit(){
        var editor = document.getElementById("pageEditor");
        editor.contentWindow.document.designMode = "off";
        //顯示編碼後的html代碼
        var editedHTML = document.getElementById("editedHTML");
        editedHTML.textContent = editor.contentWindow.document.body.innerHTML;
    }
</script>
<iframe id="pageEditor" src="/index.html" style="width:500px;height:150px"></iframe>
<button onclick="startEdit()">開始編輯</button>
<button onclick="stopEdit()">停止編輯</button>
<div id="editedHTML" style="width:500px;height:150px;background-color:#FEFFCE"></div>