相容FireFox,IE,Chrome的html線上編輯設定

atlantisholic發表於2012-07-05
FirefoxChromeHTML







 window.onload=function(){
  var editor;
  alert(document.getElementById("HtmlEdit"));
  editor = document.getElementById("HtmlEdit").contentWindow;
  //只需鍵入以下設定，iframe立刻變成編輯器。
  editor.document.designMode = 'On';
  editor.document.contentEditable = true;

  //但是IE與FireFox有點不同，為了相容FireFox，所以必須建立一個新的document。
  editor.document.open();
  editor.document.writeln('

');
  editor.document.close();

  //字型特效 － 加粗方法一
  function addBold()
  {
  editor.focus();
  //所有字型特效只是使用execComman()就能完成。
  editor.document.execCommand("Bold", false, null);
  }
  //字型特效 － 加粗方法二
  function addBold()
  {
  editor.focus();
  //獲得選取的焦點
  var sel = editor.document.selection.createRange();
  insertHTML(""+sel.text+"");
  }
  function insertHTML(html)
  {
  if (editor.document.selection.type.toLowerCase() != "none")
  {
  editor.document.selection.clear() ;
  }
  editor.document.selection.createRange().pasteHTML(html) ;
  }
 }

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/23071790/viewspace-734643/，如需轉載，請註明出處，否則將追究法律責任。

相關文章