什麼是HTML在線編輯器的調用方法

HTML在線編輯器不需要懂得使用Dreamweaver會用word就會使用此編輯器在文章系統或者是新聞系統需要文字編輯的web程序中非常實用，下面我們給大家介紹一下HTML在線編輯器的調用的方法吧!

但是如何將html編輯器嵌入到web頁中和怎麼取得裡面的數據呢?!

首先我們假定我們所要調用得HTML在線編輯器放在一個單獨得頁面中文件名是上傳圖片的前台頁面

HTML在線編輯器有兩種基本調用方法

一使用object調用():

怎麼在web頁中嵌入html編輯器 我們在需要嵌入得位置加入以下html代碼object id=doc_html data= width= height= type=text/xscriptlet  VIEWASTEXT/object

其中object標簽裡面得data後面接得數據就是我們所要調用得在線編輯器頁得路徑id就是我們調用object得id後面取編輯器中得數據時就要用到這個idWidth和height就是編輯器得高度和寬度了

怎麼取得html編輯器中的數據所有需要提交的內容我們都是放在一個表單裡面同樣利用object調用的編輯器也放在這個表單裡面同時我們可以設置一個隱藏的文本區域(textarea name=content style=display:none/textarea或INPUT TYPE=hidden name=content)用以在提交的時候臨時保存html在線編輯器的數據因為在asp或者JSPPHP中不能直接獲取表單中的object的內容所以我們必須借助隱藏文本區域來獲取數據我們在表單提交的同時將object裡面的內容復制到隱藏的文本區域中詳細代碼如下

script language=

function CheckForm()

{

ntentvalue=documentformdoc_htmlvalue;

}

/script

form method=post action=add_news_saveasp  onsubmit=CheckForm() name=form

object id=doc_html name= doc_html style=LEFT: px; TOP: px data= width= height= type=text/xscriptlet  VIEWASTEXT/object

input type=hidden name=content

/form

這樣在後台處理的頁面中我們就可以直接通過取隱藏區域content的數據來獲取html在線編輯器的數據

怎麼在文本編輯器中加入上傳本機圖片到html在線編輯器中首先我們使得在點擊插入圖片的按鈕時彈出一個上傳圖片的窗口我們利用自己寫的程序來實現上傳本機圖片到服務器上然後我們需要記錄圖片的路徑然後通過html在線編輯器的值中加入顯示圖片的html標簽詳細說明及代碼如下

在編輯器中我們在插入圖片的按鈕上加入事件onclick=windowopen(img_uploadaspimg_uploadwidth= height=)在img_uploadasp中我們將提交的圖片上傳到服務器制定目錄然後記錄圖片路徑

script language=

var src=%=upload/newname%;

openerform doc_htmlvalue +=img border= src=+src+;

windowclose();

/script

這樣就實現了簡單的將上傳的圖片插入到編輯器中

怎麼在編輯修改文章的時候調用HTML在線編輯器來修改數據當我們把在添加的時候將HTML在線編輯器來修改數據提交到數據庫後我們還需要能將數據庫的內容用HTML在線編輯器來修改數據首先我們在表單中加入一個隱藏區域來放置數據庫中的內容例如TEXTAREA style=display:none NAME=content ROWS= COLS=%= rs(Content)%/TEXTAREA要注意這裡我們用隱藏的textarea而不能用隱藏的input因為數據裡面可能包含了回車換行所以如果我們使用INPUT TYPE=hidden name=content value=%=(rs(Content)%很可能因為%=(rs(Content)%有換行而出現HTML錯誤(value=後面接的數據必須保證是在一行否則出錯)然後按照前面介紹的方法使用object調用HTML在線編輯器方法和代碼同上現在我們要做的其實就是提交時候的逆過程我們只要將隱藏文本區域的內容復制到HTML在線編輯器就可以了在這裡我們在body裡面加上body doc_htmlvalue=ntentvalue這樣在頁面裝載完的時候就可以將數據庫中的內容放入HTML在線編輯器中編輯了提交過程和上面介紹的一樣在此就不贅述了

二使用iframe調用()

怎麼在web頁中嵌入我們在需要嵌入得位置加入以下html代碼IFRAME SRC= id=content_html style=LEFT: px; POSITION: absolute; TOP: px;zindex:width=% height=%/IFRAME其中src=後面接得數據就是我們所要調用得在線編輯器頁得路徑id就是我們調用IFRAME得idWidth和height就是編輯器得高度和寬度了

怎麼取得html編輯器中的數據同樣所有需要提交的內容我們都是放在一個表單裡面同時我們可以設置一個隱藏的文本區域(textarea name=content style=display:none/textarea或INPUT TYPE=hidden name=content)用以在提交的時候臨時保存html在線編輯器的數據我們借助隱藏文本區域來獲取數據我們在表單提交的同時將object裡面的內容復制到隱藏的文本區域中詳細代碼如下

function subchk(cmd)

{

ntentvalue= ntent_htmlgetHTML();

}

/SCRIPT

FORM METHOD=POST ACTION=Article_add_savegl name=form onsubmit= subchk()

input type=hidden name=content

IFRAME SRC= id=content_html style=LEFT: px; POSITION: absolute; TOP: px;zindex: width=% height=%/IFRAME

/FORM

在後台處理的頁面中我們就可以直接通過取隱藏區域content的數據來獲取html在線編輯器的數據

怎麼取得html編輯器中的數據所有需要提交的內容我們都是放在一個表單裡面同樣利用object調用的編輯器也放在這個表單裡面同時我們可以設置一個隱藏的文本區域(textarea name=content style=display:none/textarea或INPUT TYPE=hidden name=content)用以在提交的時候臨時保存html在線編輯器的數據因為在asp或者jspphp中不能直接獲取表單中的object的內容所以我們必須借助隱藏文本區域來獲取數據我們在表單提交的同時將object裡面的內容復制到隱藏的文本區域中詳細代碼如下

script language=

function CheckForm()

{

ntentvalue=documentformdoc_htmlvalue;

}

/script

form method=post action=add_news_saveasp  onsubmit=CheckForm() name=form

object id=doc_html name= doc_html style=LEFT: px; TOP: px data= width= height= type=text/xscriptlet  VIEWASTEXT/object

input type=hidden name=content

/form

這樣在後台處理的頁面中我們就可以直接通過取隱藏區域content的數據來獲取html在線編輯器的數據

怎麼在文本編輯器中加入上傳本機圖片到html在線編輯器中首先我們使得在點擊插入圖片的按鈕時彈出一個上傳圖片的窗口我們利用自己寫的程序來實現上傳本機圖片到服務器上然後我們需要記錄圖片的路徑然後通過在調用html在線編輯器的web頁中寫一個函數在光標的位置插入顯示圖片的html標簽詳細說明及代碼如下

在編輯器中我們在插入圖片的按鈕上加入事件onclick=windowopen(img_uploadaspimg_uploadwidth= height=)在調用編輯器的頁面中我們定義好插入html代碼到編輯器的函數

script language=

function insertHtml(HtmlCode)

{

var win=ntent_htmlidEditboxdocument;//其中編輯區域是中的一個iframeid是idEditbox

ntent_htmlidEditboxfocus();//是編輯器獲得焦點防止代碼插入在編輯器外地方

winselectioncreateRange()pasteHTML(HtmlCode)//在光標的位置插入html代碼

}

/script

在處理上傳圖片的文件中我們調用父窗口的函數插入html代碼

script language=

var src=%= upload/newname%;

var htmlcodes;

htmlcodes = img src=+src+ alt=%=theForm(alt)% align=%=theForm(align)% border=%=theForm(border)% hspace=%=theForm(hspace)% vspace=%=theForm(vspace)%;

openerinsertHtml(htmlcodes)

windowclose();

/script

這樣就實現了簡單的將上傳的圖片插入到編輯器中

怎麼在編輯修改文章的時候調用HTML在線編輯器來修改數據當我們把在添加的時候將HTML在線編輯器來修改數據提交到數據庫後我們還需要能將數據庫的內容用HTML在線編輯器來修改數據首先我們在表單中加入一個隱藏區域來放置數據庫中的內容例如TEXTAREA style=display:none NAME=content ROWS= COLS=%= rs(Content)%/TEXTAREA在這裡我們在調用編輯器的頁面中的body標簽裡面加上BODY

以上就是我們給大家介紹的HTML在線編輯器的調用的方法了。希望大家繼續關注我們的網站!