以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

自製 WYSIWYG RichEditor 探討(2)-execCommand

1/11 12' icon

Photo by ckeditor.com/

這個主題,在這段文字仍存在時,仍是進行式,內容是對於網頁編輯器(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

以下為文章回應區

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

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