在我們管理網站時,很容易出現編輯器問題,有些事由於網絡問題,如網速過慢也會導致無法上傳圖片,或者是編輯內容,另一些就可能是編輯器本身的問題,如編輯器和當前瀏覽器不匹配,這種情況就需要我們重新來裝載編輯器,過程非常簡單,簡言之,上傳和調用!<iframe id="eWebEditor1" src="../edit/ewebeditor.php?id=content" frameborder="0" scrolling="No" width="550" height="350"></iframe>
<input name="content" type="hidden" id="content" />
每個iframe是一個eWebeditor編輯器,src是eWebeditor編輯器所在的相對目錄。?id=content和下面的<input name="content" type="hidden" id="content" />要對應。
安裝是非常容易的,首先你要做的就是把eWebEditor文件上傳到你的網站,請按以下步驟進行:
從eWebEditor產品網站下載最新的版本。
解壓下載下來的壓縮文件到你本機(確定eWebEditor內的目錄文件結構層次保持與壓縮文件內一致)。
在你的站點上建一個新文件夾,如:/eWebEditor/(最好在要目錄下,調用更方便)。
把eWebEditor在的所有文件及目錄上傳到你站點剛才建立的文件夾中。
運行例子文件(http://www.yoursite.com/ewebeditor/example/test.asp),看是否運行正常。OK。
設置:
eWebEditor帶有后台管理功能,你可以方便對樣式,上傳文件等進行管理。設置請注意:
后台管理的登錄地址:http://www.yoursite.com/ewebeditor/admin_login.asp
第一次安裝請用默認用戶admin和密碼admin登陸后台,並進入管理頁面更改管理用戶和密碼
建議安裝好后,更改數據庫名字,以免別人惡意下載,默認數據名為db/ewebeditor.mdb,更改名字后請修改include/startup.asp文件中相關連接
系統自帶有幾個標准樣式,不允許修改,在你新增樣式時,最好先預覽,然后通過“拷貝標准樣式”的方式,以達到快速新增樣式的目的,且不易出錯
調用:
eWebEditor的調用是非常簡單,基本上只是在原來的使用中加入一行代碼。
標准調用:
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> 參數說明:
/ewebeditor.asp應改為你實際安裝的路徑
參數id:相關聯的表單項名,也就是提交保存頁要引用的表單項名,多個調用時,請保證id不同,可參見后面例子
參數style:使用的樣式名,可以是標准的樣式名或自定義的樣式名,如果使用標准standard可留空
width,height:根據實際需要設置,eWebEditor將自動調整與其適應
在后台管理中,可以得到每個樣式的最佳調用代碼
所有入口參數:(即:eWebEditor.asp?后面的參數)
id:相關聯的保存編輯內容的表單項名,也就是提交保存頁要引用的表單項名
style:使用的樣式名,可以是標准的樣式名或自定義的樣式名,如果使用標准standard可留空
originalfilename:相關聯的保存上傳原文件名列表的表單項名,必須是input類型,可以帶onchange事件[例子]
savefilename:相關聯的保存上傳保存文件名列表的表單項名,必須是input類型,可以帶onchange事件[例子]
savepathfilename:相關聯的保存上傳保存文件名(帶路徑)列表的表單項名,必須是input類型,可以帶onchange事件[例子]
例子:新增表單
你原來可能是:
<textarea name="content1" rows=10 cols=50></textarea>
現在是:
<input type="hidden" name="content1" value="">
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> 或者 <textarea name="content1" style="display:none"></textarea>
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>
例子:修改表單
你原來可能是:
<textarea name="content1" rows=10 cols=50><%=Server.HTMLEncode(oRs("D_Content"))%></textarea>
現在是:
<input type="hidden" name="content1" value="<%=Server.HTMLEncode(oRs("D_Content"))%>">
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe> 或者 <textarea name="content1" style="display:none"><%=Server.HTMLEncode(oRs("D_Content"))%></textarea>
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>
注意事項:
eWebEditor允許在同一表單里有多個,但請保證id在整個網頁中是唯一的。即如果已經用了input name=content1第二個調用就要input name=content2之類的。
在使用textarea作為原表單項時,要加入style="display:none"。
在input修改時一定要用value="",而不是value=''。
一定要在動態加入value值時用Server.HTMLEncode()進行處理,否則有可能內容被截掉。
高級調用:
eWebEditor還提供了一些高級調用的方法,如下,但請保證大小寫一致:
getHTML():返回編輯器的內容
setHTML( html ):設置編輯器的內容
insertHTML( html ):在當前選擇處插入內容
appendHTML( html ):在文檔末尾追加內容
setMode( NewMode ):改變當前編輯狀態
參數NewMode:
"CODE":代碼狀態
"EDIT":編輯狀態
"TEXT":文本狀態
"VIEW":預覽狀態
使用例子如下:[在線演示]
<Script Language=JavaScript>
// 取編輯器內容
var sHTML = eWebEditor1.getHTML();
// 設置編輯器內容
eWebEditor1.setHTML('<b>Hello My World!</b>');
// 在當前選擇處理插入
eWebEditor1.insertHTML('This is Insert Function!');
// 在尾部追加內容
eWebEditor1.appendHTML('This is Append Function!');
// 改變編輯器狀態為代碼編輯狀態
eWebEditor1.setMode('CODE');
</Script>
取值說明:
由於eWebEditor有對大表單進行自動處理,所以在取值時有些不同,具體如下:
原來是
<%
sContent = Request.Form("content1")
%>
現在是
<%
For i = 1 To Request.Form("content1").Count
sContent = sContent & Request.Form("content1")(i)
Next
%>
接口:彈窗調用說明:
v2.7.5版本后加入了彈窗調用接口的擴充功能,能實現通過一個鏈接彈窗打開編輯器,並將編輯的內容保存入指定的表單域。
在eWebEditor根目錄下文件名為PopUp.asp,提供的接口傳入參數如下:
style : 樣式名
form : 要返回或設置值的表單form名
field : 要返回或設置值的表單項textarea名
使用例子如下:[在線演示]
<HTML>
<BODY>
<Script Language=JavaScript>
function eWebEditorPopUp(style, form, field) {
var oPopUp = window.open("PopUp.asp?style="+style+"&form="+form+"&field="+field, "PopUp"+form+field, "toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes");
}
</Script>
<FORM ACTION="" METHOD="" NAME="myForm">
<TEXTAREA NAME="myField" COLS="50" ROWS="5"></TEXTAREA>
<INPUT TYPE="BUTTON" VALUE="HTML編輯" ONCLICK="eWebEditorPopUp('s_popup', 'myForm', 'myField')">
</FORM>
</BODY>
</HTML>
接口:前台解釋(限制)擴充功能說明:
此功能禁用某些標簽,如出於安全考慮的Script標簽,等。各版本可能有所不同,請參看實際文件中的說明:
Function eWebEditor_DeCode(s_Content, sFilters)
s_Content : 要轉換的數據字符串
s_Filters : 要過濾掉的格式集,用逗號分隔多個
使用例子如下:
先包含擴展功能文件,以下路徑相應更改
<!--#include file = "Include/DeCode.asp"-->
<%
' 此例只過濾SCRIPT標簽,即意味着內容中的客戶端腳本不會生效,您可根據實際的需要加入其它標簽。
sContent = eWebEditor_DeCode(sContent, "SCRIPT")
%>
更多使用說明請參看[代碼實例],每個程序文件中都有足夠詳細的注釋。
編輯人員使用說明
界面概述:
所見即所得的在線編輯器界面主要分為以下三大部分:
菜單欄
編輯器頂部為菜單欄,主要放置各種編輯功能的選項及按鈕圖標,使用者只需點擊圖標或選擇相關選項即可實時對編輯欄編輯的內容進行添加或修改、修飾。
編輯欄
編輯器中部空白處為編輯欄,主要是供使用者輸入及編輯內容所用,同時所編輯的內容全部都是所見即所得,但有部分內容,如活動的圖像、文字、電影等在編輯狀態下只會呈現靜止狀態,需使用者轉換到預覽狀態方可真實再現。
狀態欄
編輯器底部為狀態欄,主要放置轉換編輯器狀態的按鈕圖標,狀態共分為:代碼狀態、編輯狀態(默認)、文本狀態、預覽狀態。具體每種狀態的作用請詳見幫助中心目錄的“狀態欄使用說明”。
菜單欄使用說明:
編輯器菜單欄圖標功能使用說明如下:
:設置字體樣式為粗體。
:設置字體樣式為斜體。
:設置字體樣式為帶下划線。
:設置字體樣式為帶中划線。
:設置字體樣式為上標。
:設置字體樣式為下標。
:設置字體變大。
:設置字體樣變小。
:設置內容向左對齊。
:設置內容向右對齊。
:設置內容向中對齊。
:設置內容兩端對齊。
:設置內容以編號列表形式排列。
:設置內容以列表項形式排列。
:減少內容的縮進量。
:增加內容的縮進量。
:設置字體的顏色。
:設置字體背景顏色。
:設置對象背景顏色。
:剪切指定內容。
:復制指定內容。
:粘貼剪貼板中的內容。
:以純文件形式粘貼剪貼板中的內容。
:粘貼從Word中復制的內容,並去除冗余格式。
:刪除指定內容。
:刪除指定內容的格式。
:撒消上次操作。
:恢復上次操作。
:選定所有內容。
:取消選定的內容。
:表單菜單。
:插入文本輸入框。
:插入文字區。
:插入單選按鈕。
:插入復選框。
:插入下拉框。
:插入按鈕。
:插入或修改字幕,即滾動文字。
:插入水平尺。
:插入換行符。
:插入段落。
:插入或修改超級鏈接。
:刪除超級鏈接或標簽。
:圖形熱點鏈接。
:標簽管理。
:表格菜單。
:插入表格...。
:表格屬性...。
:單元格屬性...。
:拆分單元格...。
:表格行屬性...。
:插入行(在上方)。
:插入行(在下方)。
:合並行(向下方)。
:拆分行。
插入列(在左側)。
:插入列(在右側)。
:合並列(向右側)。
:拆分列。
:在指定位置插入或修改欄目框。
:在指定位置插入或修改網頁幀。
:在指定位置插入或修改圖片。
:在指定位置插入Flash動畫。
:在指定位置插入自動播放的媒體文件。
:在指定位置插入其它文件。
:遠程自動文件獲取。
:在指定位置插入EXCEL表格。
:在指定位置插入特殊字符。
:指定位置的背景圖片管理。
:在指定位置插入表情圖標。
:在指定位置插入當前日期。
:在指定位置插入當前時間。
:轉換指定內容為代碼樣式。
:轉換指定內容為引用樣式。
:顯示或隱藏指導方針。
:查找替換功能。
:新建文檔功能。
:相對或絕對位置設置功能。
:上移一層。
:下移一層。
:縮放菜單。
:增高編輯區。
:減小編輯區。
:轉為代碼狀態。
:轉為編輯狀態。
:轉為文本狀態。
:轉為預覽狀態。
:打印全頁。
:保存內容到相關聯的表單。
:打開全屏編輯。
:關閉全屏編輯並返回。
:彈窗保存並返回。
:查看在線使用幫助。
:關於編輯器的版權信息。
:直接訪問eWebEditor站點。
:工具菜單。
:文件視圖菜單。
:編輯菜單。
:對象效果菜單。
:組件菜單。
編輯器菜單欄下拉選項功能使用說明如下:
段落格式:設置文字內容的段落格式,使內容更加條理及便於閱讀。
特殊字體格式:設置文字內容的特殊格式,包括刪除線、飛行文字、移動文字等。
選擇字體:設置文字內容的字體格式,可用自定義字體功能設置列表中沒出列出的字體格式。注:需瀏覽者操作系統安裝有相應字體文件才可正常顯示自定義的字體。
字號:設置文字內容的大小。共分7種尺寸。
縮放:放大或縮小編輯區內的內容。
注意事項:
部分提供修改功能的按鍵或選項,只需選擇原來插入的對象,再按同一按鍵或選項,即可進行修改。
部分提供設置功能的按鍵或選項,都可以通過再按一次按鍵或選項來取消前一次的設置。
編輯欄使用說明:
編輯器編輯欄主要放置供使用者編輯內容的編輯框,若內容超出框架寬度或長度的話,會自動出現滾動條。另外還可通過狀態欄的狀態轉換可轉換編輯框的不同編輯狀態。
狀態欄使用說明:
編輯器狀態欄放置有編輯器狀態轉換欄,共有四種狀態可供轉換,詳細如下:
編輯狀態(默認),在此狀態下所有編輯的內容皆為所見即所得的方式。
代碼狀態,在此狀態下所有編輯的內容皆以HTML標記源代碼方式顯示或編輯。
文本狀態,在此狀態下所有編輯的內容皆以純文本方式顯示或編輯。
預覽狀態,在此狀態下所有內容皆以不可編輯的頁面輸出方式顯示,可利用此狀態預覽編輯內容輸出后的效果。
使用技巧:
乾坤小挪移
如果在網絡上看到哪篇文章或新聞甚至頁面覺得不錯的話,可以用鼠標將相應頁面內容全部選擇起來后,直接拖動或復制到編輯器的編輯框即可,而且原頁面上的圖片、文字、CSS樣式、動態效果等都能原封不動地轉移到編輯框,不用修改或添加任何代碼。
巧用插入自動播放媒體功能
插入自動播放媒體功能可以自動識別各種媒體格式並用相應的播放器在頁面自動播放,而且這個功能還能識別圖像文件,壓縮文件等。大家可以充分利用此功能編輯出更多色聲俱全的內容。
靈活運用預覽狀態
編輯內容中帶有動態效果、即時播放媒體、GIF動畫等活動內容時,編輯狀態中只能顯示靜態的圖像或播放器界面,這時只需要將狀態轉換為預覽狀態就可以馬上看到這些內容的動態實時效果,如果想繼續編輯的話,只需再轉換到編輯狀態即可。