HTML在線編輯器不需要懂得使用Dreamweaver,會用Word就會使用此編輯器,在文章系統(tǒng)或者是新聞系統(tǒng)需要文字編輯的web程序中非常實用。
但是如何將html編輯器嵌入到web頁中和怎么取得里面的數據呢?!
首先我們假定我們所要調用得HTML在線編輯器放在一個單獨得頁面中,文件名是gledit.htm。
HTML在線編輯器有兩種基本調用方法
一、使用object調用:
1、怎么在web頁中嵌入html編輯器: 我們在需要嵌入得位置加入以下html代碼:
其中object標簽里面得data后面接得數據就是我們所要調用得在線編輯器頁得路徑,id就是我們調用object得id,后面取編輯器中得數據時就要用到這個id。Width和height就是編輯器得高度和寬度了。
2、怎么取得html編輯器中的數據:所有需要提交的內容我們都是放在一個表單里面,同樣利用object調用的編輯器也放在這個表單里面,同時我們可以設置一個隱藏的文本區(qū)域(或)用以在提交的時候臨時保存html在線編輯器的數據,因為在asp或者jsp,php中不能直接獲取表單中的object的內容,所以我們必須借助隱藏文本區(qū)域來獲取數據。我們在表單提交的同時將object里面的內容復制到隱藏的文本區(qū)域中。詳細代碼如下:
這樣在后臺處理的頁面中我們就可以直接通過取隱藏區(qū)域content的數據來獲取html在線編輯器的數據。
3、怎么在文本編輯器中加入上傳本機圖片到html在線編輯器中:首先我們使得在點擊插入圖片的按鈕時彈出一個上傳圖片的窗口,我們利用自己寫的程序來實現上傳本機圖片到服務器上,然后我們需要記錄圖片的路徑,然后通過html在線編輯器的值中加入顯示圖片的html標簽。詳細說明及代碼如下:
在編輯器中我們在插入圖片的按鈕上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在'img_upload.asp'中我們將提交的圖片上傳到服務器制定目錄然后記錄圖片路徑
這樣就實現了簡單的將上傳的圖片插入到編輯器中。
4、怎么在編輯修改文章的時候調用HTML在線編輯器來修改數據:當我們把在添加的時候將HTML在線編輯器來修改數據提交到數據庫后我們還需要能將數據庫的內容用HTML在線編輯器來修改數據。首先我們在表單中加入一個隱藏區(qū)域來放置數據庫中的內容,例如
,要注意這里我們用隱藏的textarea而不能用隱藏的input,因為數據里面可能包含了回車換行,所以如果我們使用
">很可能因為<%=(rs("Content")%>有換行而出現HTML錯誤(value=后面接的數據必須保證是在一行,否則出錯)。然后按照前面介紹的方法使用object調用HTML在線編輯器,方法和代碼同上,現在我們要做的其實就是提交時候的逆過程,我們只要將隱藏文本區(qū)域的內容復制到HTML在線編輯器就可以了,在這里我們在body里面加上,這樣在頁面裝載完的時候就可以將數據庫中的內容放入HTML在線編輯器中編輯了,提交過程和上面介紹的一樣,在此就不贅述了。
二、使用iframe調用(有些和object調用重復的地方就簡單描述一下)
1、 怎么在web頁中嵌入:我們在需要嵌入得位置加入以下html代碼:
其中"src="后面接得數據就是我們所要調用得在線編輯器頁得路徑,id就是我們調用IFRAME得id,Width和height就是編輯器得高度和寬度了。
2、 怎么取得html編輯器中的數據:同樣所有需要提交的內容我們都是放在一個表單里面,同時我們可以設置一個隱藏的文本區(qū)域(
或
)用以在提交的時候臨時保存html在線編輯器的數據,我們借助隱藏文本區(qū)域來獲取數據。我們在表單提交的同時將object里面的內容復制到隱藏的文本區(qū)域中。詳細代碼如下:
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}
在后臺處理的頁面中我們就可以直接通過取隱藏區(qū)域content的數據來獲取html在線編輯器的數據。
2、怎么取得html編輯器中的數據:所有需要提交的內容我們都是放在一個表單里面,同樣利用object調用的編輯器也放在這個表單里面,同時我們可以設置一個隱藏的文本區(qū)域(
或
)用以在提交的時候臨時保存html在線編輯器的數據,因為在asp或者jsp,php中不能直接獲取表單中的object的內容,所以我們必須借助隱藏文本區(qū)域來獲取數據。我們在表單提交的同時將object里面的內容復制到隱藏的文本區(qū)域中。詳細代碼如下:
這樣在后臺處理的頁面中我們就可以直接通過取隱藏區(qū)域content的數據來獲取html在線編輯器的數據。
3、怎么在文本編輯器中加入上傳本機圖片到html在線編輯器中:首先我們使得在點擊插入圖片的按鈕時彈出一個上傳圖片的窗口,我們利用自己寫的程序來實現上傳本機圖片到服務器上,然后我們需要記錄圖片的路徑,然后通過在調用html在線編輯器的web頁中寫一個函數在光標的位置插入顯示圖片的html標簽。詳細說明及代碼如下:
在編輯器中我們在插入圖片的按鈕上加入事件onclick="window.open('img_upload.asp','img_upload','width=481 height=190')">在調用編輯器的頁面中我們定義好插入html代碼到編輯器的函數
在處理上傳圖片的文件中,我們調用父窗口的函數插入html代碼
這樣就實現了簡單的將上傳的圖片插入到編輯器中。
4、 怎么在編輯修改文章的時候調用HTML在線編輯器來修改數據:當我們把在添加的時候將HTML在線編輯器來修改數據提交到數據庫后我們還需要能將數據庫的內容用HTML在線編輯器來修改數據。首先我們在表單中加入一個隱藏區(qū)域來放置數據庫中的內容,例如
,在這里我們在調用編輯器的iframe里面加上
,這樣在頁面裝載完的時候就可以將數據庫中的內容放入HTML在線編輯器中編輯了,提交過程和上面介紹的一樣,在此就不贅述了。
以上就是HTML在線編輯器的調用方法和使用方法的內容,更多相關文章請關注PHP中文網(www.miracleart.cn)!