空間站
          
				
          北極心空
          
			          		
		
          
	
          

          

          
	
          
		
          
			
				
 
BlogJava ::
首頁(yè) ::
聯(lián)系 ::
聚合
 ::
管理

			
			
			
				

	
          
		
          
			
			
			
				 
				15 
				Posts ::
				393 Stories
				::
				160 Comments
				::
				0 Trackbacks
			
		
          
	
          

			          		
		
          
	
          

          


          

          
	
          
	
					

          
			
	
	
          
		
		
          
				
          
						
								
          
										
												
          ?
          
										          		
								
          
						          
				
          
		
          
		
          
				?????????HTML在線編輯器不需要懂得使用Dreamweaver，會(huì)用Word就會(huì)使用此編輯器，在文章系統(tǒng)或者是新聞系統(tǒng)需要文字編輯的web程序中非常實(shí)用。 
          但是如何將html編輯器嵌入到web頁(yè)中和怎么取得里面的數(shù)據(jù)呢？！ 
          首先我們假定我們所要調(diào)用得HTML在線編輯器放在一個(gè)單獨(dú)得頁(yè)面中，文件名是gledit.htm。 
          HTML在線編輯器有兩種基本調(diào)用方法 


          一、使用object調(diào)用:?


          ?????????1、怎么在web頁(yè)中嵌入html編輯器： 我們?cè)谛枰度氲梦恢眉尤胍韵耯tml代碼：<object id=doc_html data="gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object> 
          其中object標(biāo)簽里面得data后面接得數(shù)據(jù)就是我們所要調(diào)用得在線編輯器頁(yè)得路徑，id就是我們調(diào)用object得id，后面取編輯器中得數(shù)據(jù)時(shí)就要用到這個(gè)id。Width和height就是編輯器得高度和寬度了。?


          ?????????2、怎么取得html編輯器中的數(shù)據(jù)：所有需要提交的內(nèi)容我們都是放在一個(gè)表單里面，同樣利用object調(diào)用的編輯器也放在這個(gè)表單里面，同時(shí)我們可以設(shè)置一個(gè)隱藏的文本區(qū)域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content">)用以在提交的時(shí)候臨時(shí)保存html在線編輯器的數(shù)據(jù)，因?yàn)樵赼sp或者jsp，php中不能直接獲取表單中的object的內(nèi)容，所以我們必須借助隱藏文本區(qū)域來(lái)獲取數(shù)據(jù)。我們?cè)诒韱翁峤坏耐瑫r(shí)將object里面的內(nèi)容復(fù)制到隱藏的文本區(qū)域中。詳細(xì)代碼如下： 
          
		
          
		
          
				?1
				
				<
				script?language
				=
				"
				javascript
				"
				>
				?
          
				?2
				
						
				
				function
				?CheckForm()?
          
				?3
				
						
						
				
				
				
						{?
          
						?4
						
								document.form1.content.value
						=
						document.form1.doc_html.value;?
          
						?5
						
								}
				          
				?
          
				?6
				
						
				
				</
				script
				>
				?
          
				?7
				
						
				
				<
				form?method
				=
				"
				post
				"
				?action
				=
				"
				add_news_save.asp
				"
				?onsubmit
				=
				"
				CheckForm()
				"
				?name
				=
				"
				form1
				"
				>
				?
          
				?8
				
						
				
				<
				object?id
				=
				doc_html?name
				=
				?doc_html?style
				=
				"
				LEFT:?0px;?TOP:?0px
				"
				?data
				=
				"
				?gledit.htm
				"
				?width
				=
				530
				?height
				=
				320
				?type
				=
				text
				/
				x
				-
				scriptlet?VIEWASTEXT
				></
				object
				>
				?
          
				?9
				
						
				
				<
				input?type
				=
				"
				hidden
				"
				?name
				=
				"
				content
				"
				?
				>
				?
          
				10
				
						
				
				</
				form
				>
				?
          
				11
				
						
				
		
          
		
          
				
          
				
          這樣在后臺(tái)處理的頁(yè)面中我們就可以直接通過(guò)取隱藏區(qū)域content的數(shù)據(jù)來(lái)獲取html在線編輯器的數(shù)據(jù)。?


          ?????????3、怎么在文本編輯器中加入上傳本機(jī)圖片到html在線編輯器中：首先我們使得在點(diǎn)擊插入圖片的按鈕時(shí)彈出一個(gè)上傳圖片的窗口，我們利用自己寫的程序來(lái)實(shí)現(xiàn)上傳本機(jī)圖片到服務(wù)器上，然后我們需要記錄圖片的路徑，然后通過(guò)html在線編輯器的值中加入顯示圖片的html標(biāo)簽。詳細(xì)說(shuō)明及代碼如下： 
          在編輯器中我們?cè)诓迦雸D片的按鈕上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在'img_upload.asp'中我們將提交的圖片上傳到服務(wù)器制定目錄然后記錄圖片路徑 
          
		
          
				1
				
				<
				script?language
				=
				javascript
				>
				?
          
				2
				
						
				
				var
				?src
				=
				'
				<%=
				"
				upload/
				"
				&
				newname
				%>
				';?
          
				3
				
						opener.form1.?doc_html.value?
				+=
				"
				<img?border=0?src=
				"
				+
				src
				+
				"
				>
				"
				;?
          
				4
				
						window.close();?
          
				5
				
						
				
				</
				script
				>
				?
		
          
		
          
				
          這樣就實(shí)現(xiàn)了簡(jiǎn)單的將上傳的圖片插入到編輯器中。
          ?

          ?????????4、怎么在編輯修改文章的時(shí)候調(diào)用HTML在線編輯器來(lái)修改數(shù)據(jù)：當(dāng)我們把在添加的時(shí)候?qū)TML在線編輯器來(lái)修改數(shù)據(jù)提交到數(shù)據(jù)庫(kù)后我們還需要能將數(shù)據(jù)庫(kù)的內(nèi)容用HTML在線編輯器來(lái)修改數(shù)據(jù)。首先我們?cè)诒韱沃屑尤胍粋€(gè)隱藏區(qū)域來(lái)放置數(shù)據(jù)庫(kù)中的內(nèi)容，例如<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70"><%= rs("Content")%></TEXTAREA>，要注意這里我們用隱藏的textarea而不能用隱藏的input，因?yàn)閿?shù)據(jù)里面可能包含了回車換行，所以如果我們使用<INPUT TYPE="hidden" name=content value="<%=(rs("Content")%>">很可能因?yàn)?lt;%=(rs("Content")%>有換行而出現(xiàn)HTML錯(cuò)誤（value=后面接的數(shù)據(jù)必須保證是在一行，否則出錯(cuò)）。然后按照前面介紹的方法使用object調(diào)用HTML在線編輯器，方法和代碼同上，現(xiàn)在我們要做的其實(shí)就是提交時(shí)候的逆過(guò)程，我們只要將隱藏文本區(qū)域的內(nèi)容復(fù)制到HTML在線編輯器就可以了，在這里我們?cè)赽ody里面加上<body onload="document.form1. doc_html.value=document.form1.content.value">，這樣在頁(yè)面裝載完的時(shí)候就可以將數(shù)據(jù)庫(kù)中的內(nèi)容放入HTML在線編輯器中編輯了，提交過(guò)程和上面介紹的一樣，在此就不贅述了。 
          
		
          
				二、使用iframe調(diào)用（有些和object調(diào)用重復(fù)的地方就簡(jiǎn)單描述一下）?


          ?????????1、 怎么在web頁(yè)中嵌入：我們?cè)谛枰度氲梦恢眉尤胍韵耯tml代碼：<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>其中"src="后面接得數(shù)據(jù)就是我們所要調(diào)用得在線編輯器頁(yè)得路徑，id就是我們調(diào)用IFRAME得id，Width和height就是編輯器得高度和寬度了。?


          ?????????2、 怎么取得html編輯器中的數(shù)據(jù)：同樣所有需要提交的內(nèi)容我們都是放在一個(gè)表單里面，同時(shí)我們可以設(shè)置一個(gè)隱藏的文本區(qū)域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content">)用以在提交的時(shí)候臨時(shí)保存html在線編輯器的數(shù)據(jù)，我們借助隱藏文本區(qū)域來(lái)獲取數(shù)據(jù)。我們?cè)诒韱翁峤坏耐瑫r(shí)將object里面的內(nèi)容復(fù)制到隱藏的文本區(qū)域中。詳細(xì)代碼如下： 

          
		
          
		
          
				?1
				
				function?subchk(cmd)?
          
				?2
				
						{?
          
				?3
				
						document.form1.content.value=?window.content_html.getHTML();?
          
				?4
				
						}?
          
				?5
				
						
				
				</
				SCRIPT
				>
				?
          
				?6
				
						
				
				<
				FORM?
				METHOD
				=POST?
				ACTION
				="Article_add_save.gl"
				?name
				="form1"
				?onsubmit
				="?subchk()"
				>
				?
          
				?7
				
						
				
				<
				input?
				type
				="hidden"
				?name
				="content"
				?
				>
				?
          
				?8
				
						
				
				<
				IFRAME?
				SRC
				="gledit.htm"
				?id
				='content_html'?
				style
				="LEFT:?0px;?POSITION:?absolute;?TOP:?0px;z-index:0"
				?width
				="100%"
				?height
				="100%"
				></
				IFRAME
				>
				?
          
				?9
				
						
				
				</
				FORM
				>
				?
          
				10
				
						
				
		
          
		
          
				
          在后臺(tái)處理的頁(yè)面中我們就可以直接通過(guò)取隱藏區(qū)域content的數(shù)據(jù)來(lái)獲取html在線編輯器的數(shù)據(jù)。?


          ?????????2、怎么取得html編輯器中的數(shù)據(jù)：所有需要提交的內(nèi)容我們都是放在一個(gè)表單里面，同樣利用object調(diào)用的編輯器也放在這個(gè)表單里面，同時(shí)我們可以設(shè)置一個(gè)隱藏的文本區(qū)域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content">)用以在提交的時(shí)候臨時(shí)保存html在線編輯器的數(shù)據(jù)，因?yàn)樵赼sp或者jsp，php中不能直接獲取表單中的object的內(nèi)容，所以我們必須借助隱藏文本區(qū)域來(lái)獲取數(shù)據(jù)。我們?cè)诒韱翁峤坏耐瑫r(shí)將object里面的內(nèi)容復(fù)制到隱藏的文本區(qū)域中。詳細(xì)代碼如下： 

          
		
          
				?1
				
				
				<
				script?
				language
				="javascript"
				>
				
				
						?
          
						?2
						
								
						
						function
						?CheckForm()?
          
						?3
						
								
								
						
						
						
								{?
          
								?4
								
										document.form1.content.value
								=
								document.form1.doc_html.value;?
          
								?5
								
										}
						          
						?
          
						?6
						
								
						
				          
				</
				script
				>
				?
          
				?7
				
						
				
				<
				form?
				method
				="post"
				?action
				="add_news_save.asp"
				?onsubmit
				="CheckForm()"
				?name
				="form1"
				>
				?
          
				?8
				
						
				
				<
				object?
				id
				=doc_html?
				name
				=?doc_html?
				style
				="LEFT:?0px;?TOP:?0px"
				?data
				="?gledit.htm"
				?width
				=530?
				height
				=320?
				type
				=text/x-scriptlet?
				VIEWASTEXT
				></
				object
				>
				?
          
				?9
				
						
				
				<
				input?
				type
				="hidden"
				?name
				="content"
				?
				>
				?
          
				10
				
						
				
				</
				form
				>
				?
          
				11
				
						
				
		
          
		
          
				
          這樣在后臺(tái)處理的頁(yè)面中我們就可以直接通過(guò)取隱藏區(qū)域content的數(shù)據(jù)來(lái)獲取html在線編輯器的數(shù)據(jù)。?


          ?????????3、怎么在文本編輯器中加入上傳本機(jī)圖片到html在線編輯器中：首先我們使得在點(diǎn)擊插入圖片的按鈕時(shí)彈出一個(gè)上傳圖片的窗口，我們利用自己寫的程序來(lái)實(shí)現(xiàn)上傳本機(jī)圖片到服務(wù)器上，然后我們需要記錄圖片的路徑，然后通過(guò)在調(diào)用html在線編輯器的web頁(yè)中寫一個(gè)函數(shù)在光標(biāo)的位置插入顯示圖片的html標(biāo)簽。詳細(xì)說(shuō)明及代碼如下： 
          在編輯器中我們?cè)诓迦雸D片的按鈕上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在調(diào)用編輯器的頁(yè)面中我們定義好插入html代碼到編輯器的函數(shù) 
          
		
          
				1
				
				<
				script?language
				=
				javascript
				>
				?
          
				2
				
						
				
				function
				?insertHtml(HtmlCode)?
          
				3
				
						
						
				
				
				
						{?
          
						4
						
								
						
						var
						?win
						=
						window.content_html.idEditbox.document;?
          
						5
						
								window.content_html.idEditbox.focus();
						//
						是編輯器獲得焦點(diǎn)，放置代碼插入在編輯器外地方?
						
								
          
						          
						6
						
								
						
						win.selection.createRange().pasteHTML(HtmlCode)
						//
						在光標(biāo)的位置插入html代碼?
						
								
          
						          
						7
						
								
						
						}
				          
				?
          
				8
				
						
				
				</
				script
				>
				?
		
          
		
          
				
          在處理上傳圖片的文件中，我們調(diào)用父窗口的函數(shù)插入html代碼 

          
		
          
				1
				
				<
				script?language
				=
				javascript
				>
				?
          
				2
				
						
				
				var
				?src
				=
				'
				<%=
				"
				?upload/
				"
				&
				newname
				%>
				';?
          
				3
				
						
				
				var
				?htmlcodes;?
          
				4
				
						htmlcodes?
				=
				?
				"
				<img?src='
				"
				+
				src
				+
				"
				'?alt='<%=theForm(
				"
				alt
				"
				)%>'?align='<%=theForm(
				"
				align
				"
				)%>'?border='<%=theForm(
				"
				border
				"
				)%>'?hspace='<%=theForm(
				"
				hspace
				"
				)%>'?vspace='<%=theForm(
				"
				vspace
				"
				)%>'>
				"
				;?
          
				5
				
						opener.insertHtml(htmlcodes)?
          
				6
				
						window.close();?
          
				7
				
						
				
				</
				script
				>
				?
          
				8
				
						
				
		
          
		
          
				
          這樣就實(shí)現(xiàn)了簡(jiǎn)單的將上傳的圖片插入到編輯器中。?


          ?????????4、 怎么在編輯修改文章的時(shí)候調(diào)用HTML在線編輯器來(lái)修改數(shù)據(jù)：當(dāng)我們把在添加的時(shí)候?qū)TML在線編輯器來(lái)修改數(shù)據(jù)提交到數(shù)據(jù)庫(kù)后我們還需要能將數(shù)據(jù)庫(kù)的內(nèi)容用HTML在線編輯器來(lái)修改數(shù)據(jù)。首先我們?cè)诒韱沃屑尤胍粋€(gè)隱藏區(qū)域來(lái)放置數(shù)據(jù)庫(kù)中的內(nèi)容，例如
          
		
          
				
				<
				TEXTAREA?style
				=
				"
				display:none
				"
				?NAME
				=
				"
				content
				"
				?ROWS
				=
				"
				20
				"
				?COLS
				=
				"
				70
				"
				><%=
				?rs(
				"
				Content
				"
				)
				%></
				TEXTAREA
				>
				，在這里我們?cè)谡{(diào)用編輯器的iframe里面加上
				<
				IFRAME?SRC
				=
				"
				gledit.htm
				"
				?id
				=
				'content_html'?style
				=
				"
				LEFT:?0px;?POSITION:?absolute;?TOP:?0px;z-index:0
				"
				?width
				=
				"
				100%
				"
				?height
				=
				"
				100%
				"
				?onload
				=
				"
				window.content_html.idEditbox.document.body.innerHTML=document.form1.content.value
				"
				></
				IFRAME
				>
		
          
		
          
				
          這樣在頁(yè)面裝載完的時(shí)候就可以將數(shù)據(jù)庫(kù)中的內(nèi)容放入HTML在線編輯器中編輯了，提交過(guò)程和上面介紹的一樣，在此就不贅述了。 
          
		
          
				這里只是簡(jiǎn)單的向大家介紹了一下如何來(lái)調(diào)用html在線編輯器，具體代碼并未一一列出。 
		
          

	
          
	
	
          
		posted on 2006-11-01 19:34 蘆葦 閱讀(1092) 評(píng)論(1)  編輯  收藏  
	
          

          







          
	    
    


          
	
          Feedback
          
		
		
				
          			
					
          
						# re: HTML在線編輯器的調(diào)用方法和使用方法詳解
						
								2007-08-24 10:07
						
						1
					
          
					
          
						早看到就好了  回復(fù)  更多評(píng)論
						
          
						  
					
          
				
          
				
          
			

          




          





          


          

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


          

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

          



          

				

          

          




    







          
        
	




主站蜘蛛池模板：
公主岭市|
雷州市|
大冶市|
兴文县|
随州市|
鹿泉市|
郓城县|
茶陵县|
治多县|
普洱|
托克托县|
彭泽县|
新干县|
睢宁县|
马鞍山市|
旌德县|
永吉县|
德令哈市|
土默特左旗|
新昌县|
延川县|
贺州市|
霍林郭勒市|
环江|
新丰县|
临城县|
乐山市|
行唐县|
常宁市|
盐山县|
武宁县|
仲巴县|
乐亭县|
泰宁县|
陆河县|
浦县|
沅江市|
广安市|
安龙县|
高要市|
花垣县|