以下為本站文章分類清單

 

以下為本站側欄內容

以下為本頁本文內容

自製 WYSIWYG RichEditor 探討(2)-execCommand

1/11 12' icon

這個主題，在這段文字仍存在時，仍是進行式，內容是對於網頁編輯器(Rich Text Editor)製作的討論，隨時我會修正文中的錯誤，這並非已可套用的內容，請網友注意並包涵。

在上一篇「自製 WYSIWYG RichEditor 探討(1)-designMode」討論了瀏覽器網頁編輯 API 的啟動開關 - designMode，接下來，則進入到際編輯的設計，當使用者選取了部份文字或整個段落後，進行樣式設計，例如改變文字字體或大小，使用的是 execCommand() 這個指令，語法是：

RichEditorOBJ.execCommand(執行命令,參數);

RichEditorOBJ 是前篇討論中所提到的 iframe 物件。。

例如，要使被選取的文字能夠變成粗體，執行命令為：

RichEditorOBJ.execCommand('Bold',false,null);

以下作個簡單的測試：

<button onclick="editor.execCommand('Bold',false,null);">Bold

  	<iframe id="dm" name="dm">
	<script type="text/javascript">
  	var editor=window.frames['dm'].document;
  	editor.open();
  	editor.write('這個主題...');
  	editor.close();
  	editor.designMode='on';
	</script>

上面的測試中，選取一段文字，再按 Bold 按鈕，選取的文字就會變成粗體，基本上就完成了 Rich Text Editor 的基本製作。

execCommand 的參數

大多數的情況，execCommand 的執行參數為：

execCommand(執行命令,false,null);

執行命令的代表文字，可以參閱這篇 Supported Commands，第二個參數名為"boolean flag for showing UI"，第三個參數名為"value"，比較妙的是第二個參數，照字面來看，是指定要不要顯示相關介面(UI)，需要時設為 true，不過在 Mozilla 的文章中又說，設為 true 時會回傳一個 NS_ERROR_NOT_IMPLEMENTED 的錯誤，我也還沒搞懂，不過還沒看過有設定成 true 的情況就是了。

第三個參數為設定值，也就是當這個命令是必需指定值，例如設定文字，要設成多大，就有個值，或設定顏色，要什麼顏色，也有個色碼的值，這時才必需填寫第三個參數。而大多命令不需回傳值，所以很多範例是根本不寫第二三個參數，例如設粗體就寫成 execCommand('bold');

常用命令

常用命令，文字和效果都很直觀，例如斜體為 italic，加底線為 underline 等，下面列出參考文章中都有列表，或 Google 關鍵字 execCommand

以下為文章回應區

同意轉載，不過麻煩看一下轉載需知

divider

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: