萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> Html5 >> html在線編輯器源碼

html在線編輯器源碼

 大家知道html在線編輯器源碼嗎?下面我們就給大家詳細介紹一下吧!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <title>無標題頁</title>
</head>
<body>
<!--作為編輯區的iframe-->
<iframe style="width: 100%; height:100" marginwidth="0" marginheight="0" frameborder="1" id="MsgFrame"  src="about:blank"></iframe>
<br />
<input type="button" onclick="t('UnderLine')" value="下劃線" />
<input type="button" onclick="t('bold')" value="粗體" id="Button1" />
<input type="button" onclick="t('JustifyLeft')" value="左對齊" />
<input type="button" onclick="t('JustifyCenter')" value="居中對齊" />
<input type="button" onclick="t('JustifyRight')" value="右對齊" />
<input type="button" onclick="t2()" value="增高" />
<input type="button" onclick="t3()" value="減少" />
<input type="button" onclick="ViewSource()" value="查看源代碼" />
<script type="text/javascript" language="javascript">
  //使iframe進入編輯狀態。
  var editor;
   editor = document.getElementByIdx("MsgFrame").contentWindow;
// editor = frames["HtmlEdit"];也可以用這行
   editor.document.designMode = 'On';
   editor.document.contentEditable = true;
   editor.document.open();
   editor.document.writeln('<html><head>');
   editor.document.writeln("</head><body></body></html>");
   editor.document.onclick = "alert()";
   editor.document.close();
   editor.document.charset="gb2312";
  function t(s)
   {
     editor.document.execCommand(s,false,null);
   }
  //增高
  function t2(){
     var obj=window.frames["MsgFrame"].frameElement;
     
     var height = parseInt(obj.offsetHeight);//獲取iframe的高度
     
     if (height+100 >= 100){
       obj.height = height+100;
      }

copyright © 萬盛學電腦網 all rights reserved