1. 程式人生 > >使某個頁面元素或整個頁面可編輯

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

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>