使某個頁面元素或整個頁面可編輯
阿新 • • 發佈:2019-02-11
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>