HTML線上編輯器的呼叫方法和使用方法

HTML線上編輯器不需要懂得使用Dreamweaver，會用Word就會使用此編輯器，在文章系統或是新聞系統需要文字編輯的web程式中非常實用。
但是如何將html編輯器嵌入web頁和怎麼取得裡面的資料呢？ ！
首先我們假設我們想要呼叫得HTML線上編輯器放在一個單獨得頁面中，檔案名稱是gledit.htm。
HTML線上編輯器有兩種基本呼叫方法
一、使用object呼叫：
1、怎麼在web頁中嵌入html編輯器： 我們在需要嵌入得位置加入以下html代碼：
其中object標籤裡面得data後面接得資料就是我們要呼叫得在線編輯器頁得路徑，id就是我們調用object得id，後面取編輯器得資料時就要用到這個id。 Width和height就是編輯器得高度和寬度了。
2、怎麼取得html編輯器中的資料：所有需要提交的內容我們都是放在一個表單裡面，同樣利用object呼叫的編輯器也放在這個表單裡面，同時我們可以設定一個隱藏的文字區域( 或)用以在提交的時候臨時保存html在線編輯器的數據，因為在asp或jsp，php中不能直接取得表單中的object的內容，所以我們必須藉助隱藏文字區域來取得資料。我們在表單提交的同時將object裡面的內容複製到隱藏的文字區域。詳細程式碼如下：

這樣在後台處理的頁面中我們就可以直接通過取隱藏區域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在線編輯器來修改數據。首先我們在表單中加入一個隱藏區域來放置資料庫中的內容，例如，要注意這裡我們用隱藏的textarea而不能用隱藏的input，因為數據裡面可能包含了回車換行，所以如果我們使用">很可能因為有換行而出現HTML錯誤（value=後面接的資料必須保證在一行，否則出錯）。了，在這裡我們在body裡面加上，這樣在頁面裝載完的時候就可以將資料庫中的內容放入HTML線上編輯器中編輯了，提交過程和上面介紹的一樣，在此就不贅述了。嵌入：我們在需要嵌入得位置加入以下html程式碼：其中"src="後面接得資料就是我們要呼叫得線上編輯器頁得路徑，id就是我們呼叫IFRAME得id，Width和height就是編輯器得高度和寬度了。 style="display:none">或)用來在提交的時候暫時保存html線上編輯器的數據，我們藉助隱藏文字區域來取得數據。我們在表單提交的同時將object裡面的內容複製到隱藏的文字區域。詳細程式碼如下：
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}

在後台處理的頁面中我們就可以直接透過取隱藏區域content的數據來獲取html線上編輯器的數據。
2、怎麼取得html編輯器中的資料：所有需要提交的內容我們都是放在一個表單裡面，同樣利用object呼叫的編輯器也放在這個表單裡面，同時我們可以設定一個隱藏的文字區域( 或)用以在提交的時候臨時保存html在線編輯器的數據，因為在asp或jsp，php中不能直接取得表單中的object的內容，所以我們必須藉助隱藏文字區域來取得資料。我們在表單提交的同時將object裡面的內容複製到隱藏的文字區域。詳細程式碼如下：

這樣在後台處理的頁面中我們就可以直接通過取隱藏區域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在線編輯器來修改資料。首先我們在表單中加入一個隱藏區域來放置資料庫中的內容，例如，在這裡我們在呼叫編輯器的iframe裡面加上，這樣在頁面裝載完的時候就可以將資料庫中的內容放入HTML線上編輯器中編輯了，提交過程和上面介紹的一樣，在此就不贅述了。

以上就是HTML線上編輯器的呼叫方法和使用方法的內容，更多相關文章請關注PHP中文網（www.php.cn）！