<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    
	

    道非道  非常道
    

    勤思、謹(jǐn)言、慎行、厚積、薄發(fā)
    

    


    
	
		

    統(tǒng)計(jì)
    
	
		
        
		
		
    web
    
		
				
			
	
		
    天圓
    
		
				
			
	
		
    經(jīng)濟(jì) 政治 軍事
    
		
				
			
	
		
    鍵康
    
		
				
			
	

        
		
	

    

    
	
					
	
    
		
    
			[轉(zhuǎn)]   JScript 編寫HTML在線編緝器
		
    
		
    

    

    document.execCommand(command, false,
value);
    
    一、首先來看一個(gè)例子：
    
<DIV contenteditable="true" style="border:dashed blue 2px">Hello World!</DIV>
    

    
保存為html網(wǎng)頁，打開看看，在DIV里出現(xiàn)了一個(gè)光標(biāo)，這個(gè)DIV就變成可以編輯的了。
    

    
類似的，SPAN，F(xiàn)ONT等都可以有 contenteditable="true"  這個(gè)屬性。
    

    
再試試下面的：
    

    
    <DIV contenteditable="true" style="border:dashed blue 2px">Hello World!
    
        <IMG src="http://p.blog.csdn.net/images/p_blog_csdn_net/comstep/70786/o_logo.jpg" />
    
    </DIV>
    
我們就可以拉伸圖片了。
    
    

    二、具體實(shí)現(xiàn)：
    

        1、需要兩個(gè)頁面，blank.html editor.html
    

        2、blank.html 作為 editor.html的一個(gè)內(nèi)嵌Frame，作為編輯框。
    

    

    

     2、blank.html
    
<html>
    
    <body topmargin="10" leftmargin="10" bgColor="#f6f6f6">
    
      <div id="RTC" contenteditable = true></div>
    
    </body>
    
    </html>
    

    
 3、editor.html 主要是一些Javascript，用來處理不同的命令 
    

    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    
    <HTML>
    
    <HEAD>
    
    <TITLE> New Document </TITLE>
    
    <META NAME="Generator" CONTENT="EditPlus">
    
    <META NAME="Author" CONTENT="">
    
    <META NAME="Keywords" CONTENT="">
    
    <META NAME="Description" CONTENT="">
    
    <SCRIPT LANGUAGE="JavaScript">
    
    <!--
    
    var contentHTML;
    
    function exeCommand(command, value)
    
{
    
  document.execCommand(command,     false, value);
    
}
    

    
    // 加粗
    
    function Black()
    
{
    
      var obj = frames['ifRTC'].RTC;
    
  obj.focus();
    
  exeCommand(    'Bold', '');
    
}
    

    
    // 斜體
    
    function Italic()
    
{
    
      var obj = frames['ifRTC'].RTC;
    
  obj.focus();
    
  exeCommand(    'Italic', '');
    
}
    

    
    // 下劃線
    
    function UnderLine()
    
{
    
      var obj = frames['ifRTC'].RTC;
    
  obj.focus();
    
  exeCommand(    'Underline', '');
    
}
    

    
    // 向里縮進(jìn)
    
    function Indent()
    
{
    
      var obj = frames['ifRTC'].RTC;
    
  obj.focus();
    
  exeCommand(    'Indent', '');
    
}
    

    
    // 向外縮進(jìn)
    
    function Outdent()
    
{
    
      var obj = frames['ifRTC'].RTC;
    
  obj.focus();
    
  exeCommand(    'Outdent', '');
    
}
    

    
    // 無序列表
    
    function UnorderList()
    
{
    
      var obj = frames['ifRTC'].RTC;
    
  obj.focus();
    
  exeCommand(    'InsertUnorderedList', '');
    
}
    

    
    // 有序列表
    
    function OrderList()
    
{
    
      var obj = frames['ifRTC'].RTC;
    
  obj.focus();
    
  exeCommand(    'InsertOrderedList', '');
    
}
    

    
    // 插入圖片
    
    function Image()
    
{
    
      var obj = frames['ifRTC'].RTC;
    
  obj.focus();
    
  ImagePath     = window.prompt('請輸入圖片路徑：', '');
    
  exeCommand(    'InsertImage', ImagePath);
    
}
    

    
    // 預(yù)覽效果
    
    function Preview()
    
{
    
      var htmlContent = frames['ifRTC'].RTC.innerHTML;
    
      var open = window.open('');
    
  open.document.write(htmlContent);
    
}
    

    
    // 查看編輯框里的HTML源代碼
    
    function Source()
    
{
    
      var htmlContent = frames['ifRTC'].RTC.innerHTML;
    
      if (document.all.iframeDiv.style.display == 'block')
    
  {
    
    document.all.iframeDiv.style.display     = 'none';
    
    document.all.htmlText.value     = htmlContent;
    
    document.all.textDiv.style.display     = 'block';
    
    document.all.htmlText.focus();
    
    document.all.Source.value    ='HTML';
    
  }
    
      else
    
  {
    
    document.all.iframeDiv.style.display     = 'block';
    
    document.all.textDiv.style.display     = 'none';
    
    frames[    'ifRTC'].RTC.innerHTML = document.all.htmlText.value;
    
    frames[    'ifRTC'].RTC.focus();
    
    document.all.Source.value    =' 源代碼 ';
    
  }
    
}
    

    
    // 增加編輯框的高度
    
    function Add()
    
{
    
  document.all.ifRTC.height     = document.all.ifRTC.height*1 + 50;
    
}
    
    //-->
    
    </SCRIPT>
    
    </HEAD>
    

    
    <BODY>
    
    <TABLE width="400"border="0">
    
    <TR>
    
     <TD><input type="button" value="B" name="Black" onclick="Black()" /></TD>
    
     <TD><input type="button" value="I" name="Italic" onclick="Italic()" /></TD>
    
     <TD><input type="button" value="U" name="UnderLine" onclick="UnderLine()" /></TD>
    
      <TD><input type="button" value="UL" name="UnorderList" onclick="UnorderList()" /></TD>
    
      <TD><input type="button" value="OL" name="OrderList" onclick="OrderList()" /></TD>
    
     <TD><input type="button" value="左" name="Outdent" onclick="Outdent()" /></TD>
    
     <TD><input type="button" value="右" name="Indent" onclick="Indent()" /></TD>
    
     <TD><input type="button" value="圖" name="Image" onclick="Image()" /></TD>
    
    </TR>
    
    </TABLE>
    
    <div id="iframeDiv" style="display:block">
    
    <iframe id="ifRTC" width="400" height="200" border="1" src="blank.html" ></iframe>
    
    </div>
    
    <div id="textDiv" style="display:none">
    
      <textarea id="htmlText" cols="50" rows="10"></textarea>
    
    </div>
    
    <br>
    
    <input type="button" value=" + " name="Add" onclick="Add()" />&nbsp;&nbsp;
    
    <input type="button" value=" 預(yù)  覽 " name="Preview" onclick="Preview()" />&nbsp;&nbsp;
    
    <input type="button" value=" 源代碼 " name="Source" onclick="Source()" />
    
    </BODY>
    
    </HTML>
    

    

    

    

    三、后記：
    

    

    這里寫的只是一個(gè)簡單的編輯器，其實(shí)重要的就是：
    

    contenteditable="true"
    

    和
    

    document.execCommand(command, false, value);
    

    關(guān)于 document 的一些方法，可以查看MS的文檔。
    

    execCommand 的一些命令也可以在文檔里找到，下面列出一些：
    

    

    execCommand(command, false, value); 中的 command
可以是以下這些：
    

    
    
        
    
            BackColor
            Sets or retrieves the background color of the
            current selection.
        
    
        
    
            Bold
            Toggles the current selection between bold and
            nonbold.
        
    
        
    
            ClearAutocompleteForForms
            Clears saved forms data.
        
    
        
    
            Copy
            Copies the current selection to the
            clipboard.
        
    
        
    
            CreateBookmark
            Retrieves the name of a bookmark anchor or creates a
            bookmark anchor for the current selection or insertion point.
        
    
        
    
            CreateLink
            Retrieves the URL of a hyperlink or creates a
            hyperlink on the current selection.
        
    
        
    
            Cut
            Copies the current selection to the clipboard and
            then deletes it.
        
    
        
    
            Delete
            Deletes the current selection.
        
    
        
    
            FontName
            Sets or retrieves the font for the current
            selection.
        
    
        
    
            FontSize
            Sets or retrieves the font size for the current
            selection.
        
    
        
    
            ForeColor
            Sets or retrieves the foreground (text) color of the
            current selection.
        
    
        
    
            FormatBlock
            Sets or retrieves the current block format
            tag.
        
    
        
    
            Indent
            Increases the indent of the selected text by one
            indentation increment.
        
    
        
    
            InsertButton
            Overwrites a button control on the current
            selection.
        
    
        
    
            InsertFieldset
            Overwrites a box on the current
            selection.
        
    
        
    
            InsertHorizontalRule
            Overwrites a horizontal line on the current
            selection.
        
    
        
    
            InsertIFrame
            Overwrites an inline frame on the current
            selection.
        
    
        
    
            InsertImage
            Overwrites an image on the current
            selection.
        
    
        
    
            InsertInputButton
            Overwrites a button control on the current
            selection.
        
    
        
    
            InsertInputCheckbox
            Overwrites a check box control on the current
            selection.
        
    
        
    
            InsertInputFileUpload
            Overwrites a file upload control on the current
            selection.
        
    
        
    
            InsertInputHidden
            Inserts a hidden control on the current
            selection.
        
    
        
    
            InsertInputImage
            Overwrites an image control on the current
            selection.
        
    
        
    
            InsertInputPassword
            Overwrites a password control on the current
            selection.
        
    
        
    
            InsertInputRadio
            Overwrites a radio control on the current
            selection.
        
    
        
    
            InsertInputReset
            Overwrites a reset control on the current
            selection.
        
    
        
    
            InsertInputSubmit
            Overwrites a submit control on the current
            selection.
        
    
        
    
            InsertInputText
            Overwrites a text control on the current
            selection.
        
    
        
    
            InsertMarquee
            Overwrites an empty marquee on the current
            selection.
        
    
        
    
            InsertOrderedList
            Toggles the current selection between an ordered
            list and a normal format block.
        
    
        
    
            InsertParagraph
            Overwrites a line break on the current
            selection.
        
    
        
    
            InsertSelectDropdown
            Overwrites a drop-down selection control on the
            current selection.
        
    
        
    
            InsertSelectListbox
            Overwrites a list box selection control on the
            current selection.
        
    
        
    
            InsertTextArea
            Overwrites a multiline text input control on the
            current selection.
        
    
        
    
            InsertUnorderedList
            Toggles the current selection between an ordered
            list and a normal format block.
        
    
        
    
            Italic
            Toggles the current selection between italic and
            nonitalic.
        
    
        
    
            JustifyCenter
            Centers the format block in which the current
            selection is located.
        
    
        
    
            JustifyLeft
            Left-justifies the format block in which the current
            selection is located.
        
    
        
    
            JustifyRight
            Right-justifies the format block in which the
            current selection is located.
        
    
        
    
            Outdent
            Decreases by one increment the indentation of the
            format block in which the current selection is located.
        
    
        
    
            OverWrite
            Toggles the text-entry mode between insert and
            overwrite.
        
    
        
    
            Paste
            Overwrites the contents of the clipboard on the
            current selection.
        
    
        
    
            Refresh
            Refreshes the current document.
        
    
        
    
            RemoveFormat
            Removes the formatting tags from the current
            selection.
        
    
        
    
            SelectAll
            Selects the entire document.
        
    
        
    
            SaveAs
            Saves the current Web page to a
            file.
        
    
        
    
            UnBookmark
            Removes any bookmark from the current
            selection.
        
    
        
    
            Underline
            Toggles the current selection between underlined and
            not underlined.
        
    
        
    
            Unlink
            Removes any hyperlink from the current
            selection.
        
    
        
    
            Unselect
            Clears the current
            selection.
        
    
        

    

    


    

    

    

    

    

    

    

		
    
			posted on 2008-11-26 13:40 星期五 閱讀(381) 評論(0)  編輯  收藏  
		
    
	
    
	
	


	


    
	    
    




    





    


    

	
    
		
    
				
		
	
		
    
		
		
    只有注冊用戶登錄后才能發(fā)表評論。
    
		
    
			
		
    
			
		
    
		
		
    
		


    

		    		
		
    
		
    			
		
		
		
		
    
		
    
		
		
    
		
    
			網(wǎng)站導(dǎo)航:
		
		
    
		
    
			
		
    	
		
    
			 
		
    
		
    
			
		
    
		
    
			
				
		
    		
	
    	

    



    

				

    



    







    
        
	



主站蜘蛛池模板：
国产免费拔擦拔擦8x|
老司机午夜在线视频免费观|
一区国严二区亚洲三区|
精品女同一区二区三区免费站|
人妻18毛片a级毛片免费看|
亚洲AV无码成人专区|
久久久无码精品亚洲日韩蜜臀浪潮|
亚洲国产a级视频|
啦啦啦www免费视频|
国产免费久久精品99re丫y|
久久不见久久见免费视频7|
久久精品无码专区免费|
美女啪啪网站又黄又免费|
亚洲乱码在线观看|
91亚洲视频在线观看|
亚洲精品成人网站在线播放
|
激情综合亚洲色婷婷五月APP|
久久精品国产亚洲|
亚洲色精品88色婷婷七月丁香
|
理论秋霞在线看免费|
亚洲国产成人久久精品软件|
亚洲一区二区三区免费在线观看|
亚洲精品国产啊女成拍色拍|
亚洲人成在线影院|
久久综合亚洲色HEZYO社区|
久久久久亚洲精品成人网小说|
亚洲韩国精品无码一区二区三区|
亚洲一区视频在线播放|
国产精品亚洲αv天堂无码|
国产国拍亚洲精品福利|
国产AV无码专区亚洲AWWW|
亚洲午夜福利在线观看|
亚洲色大成网站www永久一区|
亚洲人成网77777亚洲色|
国产亚洲AV手机在线观看|
亚洲一区AV无码少妇电影☆|
亚洲色婷婷一区二区三区|
亚洲国产美国国产综合一区二区
|
三年片在线观看免费大全电影|
免费视频精品一区二区三区
|
亚洲AV福利天堂一区二区三|