HTML線上編輯器不需要懂得使用Dreamweaver，會用Word就會使用此編輯器，在文章系統或者是新聞系統需要文字編輯的web程式中非常實用。
但是如何将html編輯器嵌入到web頁中和怎麼取得裡面的資料呢？！
首先我們假定我們所要調用得HTML線上編輯器放在一個單獨得頁面中，檔案名是gledit.htm。
HTML線上編輯器有兩種基本調用方法：
一、使用object調用:
1、怎麼在web頁中嵌入html編輯器： 我們在需要嵌入得位置加入以下html代碼：
<object id=doc_html data="gledit.htm" width=530 height=320 type=text/x-scriptlet VIEWASTEXT></object>
其中object标簽裡面得data後面接得資料就是我們所要調用得線上編輯器頁得路徑，id就是我們調用object得id，後面取編輯器中得資料時就要用到這個id。Width和height就是編輯器得高度和寬度了。
2、怎麼取得html編輯器中的資料：所有需要送出的内容我們都是放在一個表單裡面，同樣利用object調用的編輯器也放在這個表單裡面，同時我們可以設定一個隐藏的文本區域(
<textarea name="content" style="display:none"></textarea>或
<INPUT TYPE="hidden" name="content">)用以在送出的時候臨時儲存html線上編輯器的資料，因為在asp或者jsp，php中不能直接擷取表單中的object的内容，是以我們必須借助隐藏文本區域來擷取資料。我們在表單送出的同時将object裡面的内容複制到隐藏的文本區域中。詳細代碼如下：
<script language="javascript">
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method="post" action="add_news_save.asp" οnsubmit="CheckForm()" name="form1">
<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>
<input type="hidden" name="content" >
</form>
這樣在背景處理的頁面中我們就可以直接通過取隐藏區域content的資料來擷取html線上編輯器的資料。
3、怎麼在文本編輯器中加入上傳本機圖檔到html線上編輯器中：首先我們使得在點選插入圖檔的按鈕時彈出一個上傳圖檔的視窗，我們利用自己寫的程式來實作上傳本機圖檔到伺服器上，然後我們需要記錄圖檔的路徑，然後通過html線上編輯器的值中加入顯示圖檔的html标簽。詳細說明及代碼如下：
在編輯器中我們在插入圖檔的按鈕上加入事件
οnclick="window.open('img_upload.asp','img_upload','width=481 height=190')">
在'img_upload.asp'中我們将送出的圖檔上傳到伺服器制定目錄然後記錄圖檔路徑
<script language=javascript>
var src='<%="upload/"&newname%>';
opener.form1. doc_html.value +="<img +src+">";
window.close();
</script>
這樣就實作了簡單的将上傳的圖檔插入到編輯器中。
4、怎麼在編輯修改文章的時候調用HTML線上編輯器來修改資料：當我們把在添加的時候将HTML線上編輯器來修改資料送出到資料庫後我們還需要能将資料庫的内容用HTML線上編輯器來修改資料。首先我們在表單中加入一個隐藏區域來放置資料庫中的内容，例如
<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70"><%= rs("Content")%></TEXTAREA>，要注意這裡我們用隐藏的textarea而不能用隐藏的input，因為資料裡面可能包含了回車換行，是以如果我們使用
<INPUT TYPE="hidden" name=content value="<%=(rs("Content")%>">
很可能因為
<%=(rs("Content")%>有換行而出現HTML錯誤（value=後面接的資料必須保證是在一行，否則出錯）。然後按照前面介紹的方法使用object調用HTML線上編輯器，方法和代碼同上，現在我們要做的其實就是送出時候的逆過程，我們隻要将隐藏文本區域的内容複制到HTML線上編輯器就可以了，在這裡我們在body裡面加上<body οnlοad="document.form1. doc_html.value=document.form1.content.value">，
這樣在頁面裝載完的時候就可以将資料庫中的内容放入HTML線上編輯器中編輯了，送出過程和上面介紹的一樣，在此就不贅述了。
二、使用iframe調用（有些和object調用重複的地方就簡單描述一下）
1、 怎麼在web頁中嵌入：我們在需要嵌入得位置加入以下html代碼：
<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px; POSITION:
absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>其中"src="後面接得資料就是我們所要調用得線上編輯器頁得路徑，id就是我們調用IFRAME得id，Width和height就是編輯器得高度和寬度了。
2、 怎麼取得html編輯器中的資料：同樣所有需要送出的内容我們都是放在一個表單裡面，同時我們可以設定一個隐藏的文本區域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content">)用以在送出的時候臨時儲存html線上編輯器的資料，我們借助隐藏文本區域來擷取資料。我們在表單送出的同時将object裡面的内容複制到隐藏的文本區域中。詳細代碼如下：
function subchk(cmd)
{
document.form1.content.value= window.content_html.getHTML();
}
</SCRIPT>
<FORM METHOD=POST ACTION="Article_add_save.gl" name="form1" οnsubmit=" subchk()">
<input type="hidden" name="content" >
<IFRAME SRC="gledit.htm" id='content_html' style="LEFT: 0px;
POSITION: absolute; TOP: 0px;z-index:0" width="100%" height="100%"></IFRAME>
</FORM>
在背景處理的頁面中我們就可以直接通過取隐藏區域content的資料來擷取html線上編輯器的資料。
2、怎麼取得html編輯器中的資料：所有需要送出的内容我們都是放在一個表單裡面，同樣利用object調用的編輯器也放在這個表單裡面，同時我們可以設定一個隐藏的文本區域(<textarea name="content" style="display:none"></textarea>或<INPUT TYPE="hidden" name="content">)用以在送出的時候臨時儲存html線上編輯器的資料，因為在asp或者jsp，php中不能直接擷取表單中的object的内容，是以我們必須借助隐藏文本區域來擷取資料。我們在表單送出的同時将object裡面的内容複制到隐藏的文本區域中。詳細代碼如下：
<script language="javascript">
function CheckForm()
{
document.form1.content.value=document.form1.doc_html.value;
}
</script>
<form method="post" action="add_news_save.asp"
οnsubmit="CheckForm()" name="form1">
<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>
<input type="hidden" name="content" >
</form>
這樣在背景處理的頁面中我們就可以直接通過取隐藏區域content的資料來擷取html線上編輯器的資料。
3、怎麼在文本編輯器中加入上傳本機圖檔到html線上編輯器中：首先我們使得在點選插入圖檔的按鈕時彈出一個上傳圖檔的視窗，我們利用自己寫的程式來實作上傳本機圖檔到伺服器上，然後我們需要記錄圖檔的路徑，然後通過在調用html線上編輯器的web頁中寫一個函數在光标的位置插入顯示圖檔的html标簽。詳細說明及代碼如下：
在編輯器中我們在插入圖檔的按鈕上加入事件
οnclick="window.open('img_upload.asp','img_upload','width=481 height=190')">
在調用編輯器的頁面中我們定義好插入html代碼到編輯器的函數
<script language=javascript>
function insertHtml(HtmlCode)
{
var win=window.content_html.idEditbox.document;
window.content_html.idEditbox.focus();//是編輯器獲得焦點，放置代碼插入在編輯器外地方
win.selection.createRange().pasteHTML(HtmlCode)//在光标的位置插入html代碼
}
</script>
在處理上傳圖檔的檔案中，我們調用父視窗的函數插入html代碼
<script language=javascript>
var src='<%=" upload/"&newname%>';
var htmlcodes;
htmlcodes = "<img src='"+src+"' alt='<%=theForm("alt")%>'
align='<%=theForm("align")%>' border")%>'
hspace='<%=theForm("hspace")%>' vspace='<%=theForm("vspace")%>'>";
opener.insertHtml(htmlcodes)
window.close();
</script>
這樣就實作了簡單的将上傳的圖檔插入到編輯器中。
4、 怎麼在編輯修改文章的時候調用HTML線上編輯器來修改資料：當我們把在添加的時候将HTML線上編輯器來修改資料送出到資料庫後我們還需要能将資料庫的内容用HTML線上編輯器來修改資料。首先我們在表單中加入一個隐藏區域來放置資料庫中的内容，例如
<TEXTAREA style="display:none" NAME="content" ROWS="20" COLS="70">
<%= rs("Content")%></TEXTAREA>，
在這裡我們在調用編輯器的iframe裡面加上
<IFRAME SRC="gledit.htm" id='content_html' style="LEFT:
0px; POSITION: absolute; TOP: 0px;z-index:0" width="100%"
height="100%" οnlοad="window.content_html.idEditbox.document.body.innerHTML
=document.form1.content.value"></IFRAME>，這樣在頁面裝載完的時候就可以将資料庫中的内容放入HTML線上編輯器中編輯了，送出過程和上面介紹的一樣，在此就不贅述了。
這裡隻是簡單的向大家介紹了一下如何來調用html線上編輯器，具體代碼并未一一列出，整理過程中，如果大家對文章中的内容有任何問題和建議請和我聯系。
![vue搭建過程及出現問題[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)