激活編輯器的兩種方式:contentEditable與designMode

什麼意思呢?先舉個例子,在IE中,所有的模態對話框都是不可編輯的狀態,即不能對裏面的文本進行“複製”。這是你就需要使用到contentEditable屬性,將此屬性設置爲“true”,並把需要對其進行“複製”的文本放至此屬性的有效範圍內即可。如:

<span contentEditable = "true">
          進行復制測試
</span>

當然,關於這種只讀窗口其他的處理方式請參考:http://www.haogongju.net/art/901889

下面就來講講這兩者的之間的區別:

激活編輯器的方法有兩種。第一種方法是將整個文檔設置爲設計模式。第二種方法可以在瀏覽模式中使用,來使各個元素可在運行時編輯。如果想讓整個文檔可在瀏覽時進行編輯,則可以在文檔正文上設置 contentEditable 屬性。

將文檔設置爲設計模式

要將整個文檔設置爲設計模式,可以對文檔對象本身設置 designMode 屬性。當文檔處於設計模式時,將不運行腳本。這樣,似乎在文檔內設置一個按鈕來打開或關閉設計模式是個好注意,但這樣做沒有作用。當用戶打開它後,它將保持在設計模式狀態。當他們下次單擊此按鈕時,它將被選定而不是被單擊,他們再次單擊它,將能夠編輯它的值。這就是爲什麼如果要使用設計模式最好對框架或 IFrame 中的文檔設置 designMode 屬性的原因。下例展示如何爲 IFrame 中的文檔打開設計模式:

<script for="btnDesign" event="onclick">
targetDoc = document.frames(0).document;
if (targetDoc.designMode == "On")
targetDoc.designMode = "Off";
else
targetDoc.designMode = "On";
</script>
<button id=btnDesign>DesignMode</button>
<iframe src="blank.htm" style="border: black thin; width:100%; height:200px"></iframe>

designMode 屬性的值始終以首字母大寫格式存儲,即時它最初是以全部小寫設置的。請在測試它的值時一定記住這點。designMode 屬性的默認值是“Inherit”。

在瀏覽模式中使元素可以編輯(或在設計模式中不可編輯)

在 Internet Explorer 5.5 中,可以針對每個元素激活編輯器,而同時,文檔本身處於瀏覽模式中。只要將 contentEditable 屬性設置爲 True,就能使元素在瀏覽時可被編輯。下例展示如何說明性地設置該屬性,並創建行爲類似文本框的跨距:

<span contentEditable=true style="width:150; border:lightgrey 3px inset"></span>

要使元素在全部腳本過程中可被編輯是非常容易實現的。下面的範例顯示如何在腳本中對 ID 爲“foo”的元素設置 contentEditable 屬性:

foo.contentEditable=True;

要防止元素在設計模式中處於可編輯狀態,可以將 contentEditable 屬性設置爲 False。但這將使元素具有佈局,這樣,當它在設計模式中時,用戶將能夠對它進行控制選定、拖動、調整大小等:

foo.contentEditable=False;

contentEditable 元素的繼承和嵌套

contentEditable 屬性是被繼承的,所以,如果您說明元素具有 contentEditable 屬性,則默認情況下它的所有子元素都將是可編輯的。(contentEditable 屬性的默認值是“Inherit”。

通過將其 contentEditable 屬性設置爲 False,可以使 contentEditable 元素的後代成爲不可編輯的,但這樣之後,請記住設置元素的 contentEditable 屬性將導致元素具有自己的佈局。無論元素的 contentEditable 屬性被設置爲 True 或 False,都要發生這樣的情況。還要記住,當有佈局的元素處在可編輯的容器中時,一旦用戶單擊它的內部,它將被控制選定。當它被控制選定時,將顯示抓取手柄,並且用戶可以拖動該元素或調整其大小。這並不表示不應當在可編輯的元素內嵌套不可編輯的元素,只不過要加以注意罷了。

判斷元素是否是可編輯的

要判斷元素是否是可編輯的,只檢查 contentEditable 屬性的值是不夠的。元素可能根本沒有 contentEditable 屬性,但仍然可能已經從它的某個祖先那裏繼承了內容可編輯性。或者,它可能是默認時可編輯的元素,如文本框。或者,包含它的文檔可能處於設計模式中。確定元素是否可編輯的唯一完全可靠的方法是檢查 isContentEditable 屬性。isContentEditable 屬性綜合了所有這些因素。該屬性是隻讀的,其結果爲布爾值。下例展示如何判斷 ID 爲“foo”的元素是否可以被編輯:

result=foo.isContentEditable;   
參考文獻:http://www.cnblogs.com/GuominQiu/articles/1864895.html

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章