1.1. 在線可視化HTML編輯器概述
在Web程序應用中,最常見的一種行為是信息和言論的發布和交流。而在信息發布的同時,往往會有對信息發布的格式、類型和功能上的需求,比如:加粗、下劃線等等,以使文字信息能夠更形象更美觀的傳達給閱讀者,同時也提高信息發布的工作效率。在這個需求的背景下,HTML在線編輯器就應運而生了。
顧名思義,在線HTML編輯器就是在線編輯HTML代碼的工具,它經常被應用于留言板留言、論壇發貼、Blog編寫日志或等需要用戶輸入HTML的地方,是Web應用的常用模塊之一。在線HTML編輯器可以實現對編輯內容添加各種豐富多彩的文字效果,以及提供各種方便快捷的操作功能,最大的提高編輯工作效率。在線HTML編輯器是任何網站不可或缺的重要功能組件,是互聯網用戶得心應手的馳騁網絡的有力工具。
1.2. 獲取xhEditor
您可以訪問xhEditor官方網站下載最新版本的xhEditor編輯器,xhEditor官方網站地址為:http://xheditor.com/,打開右上角的免費下載 | 代碼向導鏈接,即可找到最新版本的下載地址。
xhEditor無需任何安裝,無需任何設置,直接解壓縮并拷貝到你的網站相應文件夾下面即可直接調用。
1.3. xhEditor運行環境
xhEditor是基于瀏覽器的HTML、CSS和Javascript環境開發的,因此原則上市場上絕大部分瀏覽器我們都能完美的運行,目前已測試的瀏覽器兼容列表如下:IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+ (+號代表往后所有新版本)。xhEditor是完全基于瀏覽器環境的,因此不存在操作系統選擇性,是完全跨平臺的。xhEditor同時也可以應用在任何的服務端語言環境下,例如:PHP、ASP、ASP.NET、JAVA等,可以在您的CMS、博客、論壇、商城等互聯網平臺上完美的嵌入運行,能夠非常靈活簡單的和您的系統實現完美的無縫銜接。
1.4. xhEditor基本使用指南
您只需按照以下簡單步驟即可學會使用xhEditor:
下載最新版本xhEditor:http://xheditor.com/download
將下載的壓縮文件解壓縮,上傳其中的xheditor-zh-cn.min.js以及xheditor_emot、xheditor_plugins和xheditor_skin三個文件夾到網站相應文件夾中
在需要調用xhEditor編輯器的網頁head標簽結束之前添加以下代碼:
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/xheditor-zh-cn.min.js"></script>
注:jQuery和xhEditor的js文件路徑請根據你網站具體路徑情況相應修改
在需要實現可視化的文本框textarea屬性中添加:
class="xheditor {skin:'default'}"
注:前面主參數也可以是xheditor-mfull、xheditor-mini或xheditor-simple,分別加載多行完全、迷你和簡單工具欄。后面大括號用來定義更多的初始化參數,可以省略。
經過以上步驟,你就已經成功的將xhEditor編輯器安裝在你的網頁中。若需要學習更多xhEditor編輯器的使用技術,請參閱:xhEditor進階使用。
2. xhEditor進階使用
2.1. 進階使用指導
2.2. 初始化參數列表
2.3. API函數接口列表
2.4. 上傳程序開發規范
2.5. 插件開發指南
2.6. 皮膚設計指南
2.7. 關于二次開發
2.1. 進階使用指導
閱讀本章節請先閱讀:xhEditor入門基礎,若你已經熟悉xhEditor的基本使用,請往下繼續。
xhEditor提供兩種方式初始化編輯器:
方法1:利用class屬性來初始化和傳遞各種初始化參數,例:
class="xheditor {skin:'default'}"
方法2:利用xhEditor提供的jQuery插件接口來實現對特定textarea的初始化和傳遞參數,例:
$('#elm1').xheditor();
或者
$('#elm1').xheditor({tools:'mini'});
特別說明:兩種初始化方法只能選擇其中一種使用,如果兩種方法的代碼同時存在頁面中,方法2的代碼不會有任何效果。
我們更傾向于推薦大家使用方法1,因為更簡單易用,不涉及任何的Javascript代碼。通過簡單的參數設置即可定制各種效果的編輯器界面,簡單易用且功能強大。
如果想實現更加復雜的交互應用,或者希望xhEditor編輯器能夠和自己的Javascript代碼實現互相訪問,那么你可以選擇使用方法2,相對具有更大的自由空間。
xhEditor也提供了即時的卸載編輯器方法:
$('#elm1').xheditor(false);
2.2. 初始化參數列表
初始化參數示例代碼:
$('#elm1').xheditor({tools:'full',skin:'default',showBlocktag:true,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://xheditor.com/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png"});
初始化參數列表:
tools:自定義工具按鈕
參數值:full(完全),mfull(多行完全),simple(簡單),mini(迷你)
或者自定義字符串,例如:'Cut,Copy,Paste,Pastetext,|,Source,Fullscreen,About'
完整按鈕表:
|:分隔符
/:強制換行
Cut:剪切
Copy:復制
Paste:粘貼
Pastetext:文本粘貼
Blocktag:段落標簽
Fontface:字體
FontSize:字體大小
Bold:粗體
Italic:斜體
Underline:下劃線
Strikethrough:中劃線
FontColor:字體顏色
BackColor:字體背景色
SelectAll:全選
Removeformat:刪除文字格式
Align:對齊
List:列表
Outdent:減少縮進
Indent:增加縮進
Link:超鏈接
Unlink:刪除鏈接
Img:圖片
Flash:Flash動畫
Media:Windows media player視頻
Emot:表情
Table:表格
Source:切換源代碼模式
Preview:預覽當前代碼
Print:打印
Fullscreen:切換全屏模式
About:關于xhEditor
skin:皮膚風格選擇
參數值:default(默認風格),o2007blue(Office 2007 藍色),o2007silver(Office 2007 銀色),vista(Vista),nostyle(NoStyle)
layerShadow:陰影的深度(按鈕面板和模式窗口的背景陰影)
參數值:0(不顯示陰影),大于0的數值(顯示陰影并設置陰影的深度)
clickCancelDialog:點擊任意位置取消按鈕面板功能
參數值:默認true(開啟點擊取消功能),false(關閉點擊取消功能,必需要點擊“取消”按鈕才能關閉按鈕面板)
showBlocktag:顯示段落標簽
參數值:true(顯示段落標簽),false(不顯示)
linkTag:樣式鏈接link標簽保留狀態
參數值:true(保留樣式鏈接link標簽),false(清理樣式鏈接link標簽)
internalScript:內部JS代碼保留狀態
參數值:true(保留內部JS代碼),false(清理內部JS代碼)
inlineScript:內聯JS代碼保留狀態
參數值:true(保留內聯JS代碼),false(清理內聯JS代碼)
internalStyle:內部樣式保留狀態
參數值:true(保留內部樣式),false(清理內部樣式)
inlineStyle:內聯樣式保留狀態
參數值:true(保留內聯樣式),false(清理內聯樣式)
width:編輯器寬度
參數值:不帶單位的數字,例:300
height:編輯器高度
參數值:不帶單位的數字,例:100
loadCSS:加載樣式
參數值:URL地址、URL數組以及直接內部樣式,例如:'1.css'、['1.css','2.css']、'<style>body{font-size:20px;}</style>'<br />備注:1.0.0 RC3新添加加載內部樣式功能
fullscreen:默認全屏顯示
參數值:true(全屏大小),false(標準大小)
sourceMode:默認源代碼模式
參數值:true(源代碼模式),false(編輯模式)
forcePtag:強制P標簽
參數值:true(強制使用P標簽),false(不強制),默認true
forcePasteText:強制將粘貼的內容轉換為文本
參數值:true(強制轉文本),false(不轉文本),默認false
備注:v1.1.0新添加
disableContextmenu:禁用編輯區的右鍵菜單
參數值:true(禁用右鍵菜單),false(不禁用),默認false
備注:v1.1.0新添加
editorRoot:編輯器JS文件所在的根路徑
參數值:編輯器所在的根路徑,用在某些特殊情況下定位編輯器的根路徑,默認為空,讀取默認的編輯器根路徑
備注:v1.1.0新添加
shortcuts:自定義鍵盤快捷方式
參數:快捷鍵對應事件代碼的對象數組
示例:{'ctrl+enter':function(){$('#frmTest').submit();}}
備注:1.0.0 beta2新添加
urlBase:相對URL地址的基地址
參數:字符串的URL地址,用以解決前后臺不在同一路徑的資源定位問題
備注:1.1.0新添加
urlType:本地URL地址強制轉換方式選擇
參數:abs(絕對路徑),root(根路徑),rel(相對路徑)
備注:1.0.0 beta2新添加,v1.1.0版中名字由localUrl變更為urlType
emotPath:修改表情圖片的URL根路徑
參數:字符串的URL地址,默認為空,指向編輯器路徑下的默認表情
備注:1.1.0新添加
emotMark:是否在表情img標簽上標注emot屬性
參數:true(標注),false(不標注),默認為false
說明:若使用了ubb插件,請設置此屬性為true
備注:1.0.0 beta2新添加
emots:添加自定義表情
參數:可定義多個JSON對象數組,示例如下:{qq:{name:'QQ',count:55,width:25,height:25,line:11},msn:{name:'MSN',count:40,width:22,height:22,line:8}}
name:表情分組名
count:表情數量
list:表情列表,例:{test1:'表情1',test2:'表情2'},鍵名代表文件名,擴展名必需為gif,鍵值代表alt信息
width:單個表情區域寬度,必需大于或等于表情最大寬度
height:單表情區域高度,必需大于或等于表情最大高度
line:單行顯示表情數量
說明:count和list必需選其中一個值,注意count模式插入表情img的alt為空
備注:1.0.0 beta2新添加
wordDeepClean:Word文檔深入清理選項
參數:true(深入清理),false(不深入清理,保留style樣式效果),默認為true
說明:若網站應用需要保留更多的Word樣式效果,請設置此值為false,不過產生的HTML代碼體積會大大增大
備注:1.0.0 beta2新添加
hoverExecDelay:懸停自動執行延遲的時間
參數:數值(單位毫秒),默認為100,設置為-1關閉此功能
備注:1.0.0 rc2新添加
defLinkText:超鏈接的默認文字
參數值:字符串(默認值:“點擊打開鏈接”)
說明:只在不選擇任何內容的情況下才會用到這個參數值
modalWidth:showModal彈出窗口的默認寬度
參數值:數值,默認為350
說明:彈出窗口的默認寬度
modalHeight:showModal彈出窗口的默認高度
參數值:數值,默認為220
說明:彈出窗口的默認高度
modalTitle:showModal彈出窗口是否顯示上方的標題欄
參數值:true(顯示),false(不顯示)
說明:控制彈出窗口是否顯示上方的標題欄,默認為顯示,若需要顯示一個更定制個性化的iframe窗口,可通過此參數隱藏上方的標題欄
upBtnText:上傳按鈕的文字
參數值:任意字符串,默認值:“上傳”
備注:1.0.0 beta2新添加
html5Upload:是否開啟HTML5上傳支持
參數值:true(允許),false(不允許),默認為true允許
說明:本功能需要瀏覽器支持HTML5上傳
備注:1.0.0 Final新添加
upMultiple:允許一次上傳多少個文件
參數值:大于0的數值,默認:99,設置為1關閉多文件上傳
說明:本功能需要瀏覽器支持HTML5上傳
備注:1.0.0 RC3新添加
upLinkUrl:超鏈接文件上傳接收URL
參數值:接收用戶上傳的服務器端程序URL,默認留空為禁用超鏈接上傳功能,具體使用方法請參考demo8演示文件
注:可使用內置變量:{editorRoot},代表當前編輯器的根路徑,例:{editorRoot}upload.php
upLinkExt:超鏈接上傳前限制本地文件擴展名
參數值:超鏈接上傳前限制的文件擴展名列表,默認為:zip,rar,txt,建議與服務端擴展名檢查列表一致
upImgUrl:圖片文件上傳接收URL
參數值:接收用戶上傳的服務器端程序URL,默認留空為禁用上傳功能,具體使用方法請參考demo8演示文件
注:可使用內置變量:{editorRoot},代表當前編輯器的根路徑,例:{editorRoot}upload.php
upImgExt:圖片上傳前限制本地文件擴展名
參數值:圖片上傳前限制的文件擴展名列表,默認為:jpg,jpeg,gif,png,建議與服務端擴展名檢查列表一致
upFlashUrl:動畫文件上傳接收URL
參數值:接收用戶上傳的服務器端程序URL,默認留空為禁用上傳功能,具體使用方法請參考demo8演示文件
注:可使用內置變量:{editorRoot},代表當前編輯器的根路徑,例:{editorRoot}upload.php
upFlashExt:動畫上傳前限制本地文件擴展名
參數值:動畫上傳前限制的文件擴展名列表,默認為:swf,建議與服務端擴展名檢查列表一致
upMediaUrl:視頻文件上傳接收URL
參數值:接收用戶上傳的服務器端程序URL,默認留空為禁用上傳功能,具體使用方法請參考demo8演示文件
注:可使用內置變量:{editorRoot},代表當前編輯器的根路徑,例:{editorRoot}upload.php
upMediaExt:視頻上傳前限制本地文件擴展名
參數值:視頻上傳前限制的文件擴展名列表,默認為:avi,建議與服務端擴展名檢查列表一致
onUpload:文件上傳成功回調函數
參數值:成功后需要執行的函數
說明:這個函數執行時返回的值為上傳程序返回的msg變量,可能為字符串或者數組,若為字符串則直接代表url,若是數組,則必需包含一個url的變量,其它可由可開發者自定義
備注:1.0.0 beta2新添加
plugins:自定義按鈕之插件擴展
插件對象的屬性解釋:
c:樣式表名稱
t:插件名字(鼠標在按鈕上方時顯示)
s:快捷方式,例:"ctrl+enter"
h:是否鼠標懸停直接執行,1:直接執行(省略當前值代表不直接執行)
e:按鈕點擊后需要執行的代碼(省略執行代碼,則把當前的插件名作為參數,調用瀏覽器的execCommand函數)
特別說明:
如果您希望樣式表存儲在系統自帶的模板目錄ui.css中,請將插件對象的樣式名留空,則會自動按照插件名來調用相應的樣式,例如:xhEdtBtnCut、xhEdtBtnCopy,其中的Cut和Copy是插件名
具體調用方法請參考演示文件夾中的demo9
2.3. API函數接口列表
API接口示例代碼:
var editor=$('#elm1').xheditor({tools:'full',skin:'default'});
editor.focus();
editor.setSource('str')
sHtml=editor.getSource()
editor.appendHTML('<p>aaa</p>')
editor.pasteHTML('<p>aaa</p>')
editor.pasteText('str')
sHtml=editor.formatXHTML('<b>aaa</b>')
editor.toggleSource()
editor.toggleFullscreen()
alert(editor.settings.upImgExt);
editor.settings.upImgExt='txt,doc';
API接口列表:
focus:使編輯器獲得焦點
無參數
setSource:設置編輯器源代碼
參數1:要設置的源代碼內容,例:'<p>aaa</p>'
getSource:返回編輯器格式后的源代碼
無參數
appendHTML:粘貼HTML內容到編輯器結尾處
參數1:要粘貼的HTML代碼,例:'<p>uuu</p>'
注:0.9.5版添加
getSelect:返回當前選中的內容
參數1:返回格式,可選'text'返回文本格式,其它所有值都返回HTML格式
pasteHTML:粘貼HTML內容到編輯器當前光標處
參數1:要粘貼的HTML代碼,例:'<p>uuu</p>'
參數2:是否覆蓋粘貼,留空(覆蓋粘貼)、true(粘貼在光標選擇區域之前)、false(粘貼在光標選擇區域之后)
pasteText:粘貼文本到編輯器當前光標處
參數1:要粘貼的文本,例:'這里的內容完全原樣顯示<strong>aaa</strong>'
參數2:是否覆蓋粘貼,留空(覆蓋粘貼)、true(粘貼在光標選擇區域之前)、false(粘貼在光標選擇區域之后)
formatXHTML:格式化XHTML代碼
參數1:需要格式化的HTML代碼,例:'<b>aaa</b>',返回'<strong>aaa</strong>'
參數2:是否代碼縮進換行,true(執行縮進格式化),false(不執行縮進格式化),默認為false
toggleSource:在源代碼模式和編輯模式之間切換
參數1:空(切換),true(顯示源代碼模式),false(顯示編輯模式)
toggleFullscreen:在全屏模式和標準大小之間切換
參數1:空(切換),true(顯示全屏模式),false(顯示標準模式)
toggleShowBlocktag:切換塊標簽顯示狀態
參數1:空(切換),true(切換為顯示塊標簽),false(切換為不顯示塊標簽)
addShortcuts:添加快捷鍵
參數1:快捷鍵值,例:'ctrl+enter'
參數2:用戶按下快捷鍵后需要響應的程序代碼,例:function(){$('#frmTest').submit();}
說明:允許為某個相同快捷鍵值重復添加多個響應代碼
備注:1.0.0 beta2新添加
delShortcuts:刪除快捷鍵
參數1:快捷鍵值,例:'ctrl+enter'
備注:1.0.0 Final新添加
exec:立即執行按鈕及插件
參數1:工具按鈕名稱(不區分大小寫),例:Link、img
說明:此函數可以在插件內部或者外部Javascript代碼中進行調用
showModal:顯示模式窗口
參數1:模式窗口的標題title
參數2:模式窗口的內容content
參數3:模式窗口的寬度w
參數4:模式窗口的高度h
參數5:模式窗口關閉時的回調函數onRemove
showIframeModal:顯示iframe式的模式窗口
參數1:模式窗口的標題
參數2:iframe的地址ifmurl,可使用內置變量:{editorRoot},代表當前編輯器的根路徑,例:{editorRoot}xheditor_plugins/test.html
參數3:提供給目標iframe頁面回調用的回調函數,可以在iframe頁面中以這樣的形式調用:callback('1.gif');
參數4:模式窗口的寬度w
參數5:模式窗口的高度h
參數6:模式窗口關閉時的回調函數onRemove
settings:獲取或者修改編輯器內部參數
internalScript:是否清除內部代碼
inlineScript:是否清除內聯代碼
internalStyle:是否清除內部樣式
inlineStyle:是否清除內聯樣式
forcePtag:強制使用P標簽
upLinkUrl:超鏈接上傳接口地址
upLinkExt:超鏈接本地上傳擴展限制
upImgUrl:圖片上傳接口地址
upImgExt:圖片本地上傳擴展限制
upFlashUrl:動畫上傳接口地址
upFlashExt:動畫本地上傳擴展限制
upMediaUrl:視頻上傳接口地址
upMediaExt:視頻本地上傳擴展限制
beforeSetSource:在設置源代碼到編輯器前調用此函數
beforeGetSource:從編輯器返回源代碼前調用此函數
focus:編輯器獲得焦點時回調此函數
blur:編輯器失去焦點時回調此函數
注:修改有效變量僅限以上,其它的變量都僅在編輯器初始化時使用
2.4. 上傳程序開發規范
上傳接收程序開發必讀:
上傳程序分標準HTML4上傳和HTML5上傳兩種情況處理:
1, HTML4上傳使用標準的表單上傳域,上傳文件域的name為:filedata
2, HTML5上傳的整個POST數據流就是上傳的文件完整數據,而本地文件名等信息儲存于HTTP_CONTENT_DISPOSITION這個服務器變量中
返回內容必需是標準的json字符串,結構可以是如下:{"err":"","msg":"200906030521128703.gif"} 或者 {"err":"","msg":{"url":"200906030521128703.jpg","localfile":"test.jpg","id":"1"}} 注:若選擇結構2,則url變量是必有
需了解更多細節,請參考發行包中的demos文件夾。其中upload.php、upload.asp、upload.aspx僅為演示參考代碼,若您使用的是其它的服務器腳本語言,請自行對初始化參數中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl進行修改,并開發相應服務器上傳接收程序。若您希望在自己的項目中實際使用,請自行修改代碼或者重新開發,開發過程中請注意上傳文件的格式及大小限制,注意服務器腳本安全問題。
上傳文件管理建議方案:
在編輯器初始化時在upload.php后面跟上一個服務器生成的絕對唯一的跟蹤值,例如:upload.php?infoid=123
在服務器接收程序中以這個跟蹤值保存到數據庫中,同時也可以限制單個跟蹤值下總上傳文件數或者總文件大小,否則就是一個可以上傳無限個文件的漏洞了
最終當前表單提交時,再根據編輯器提交的HTML內容和數據庫中上傳內容進行比較,刪除所有沒有使用的上傳文件
定期由服務器腳本刪除上傳數據庫中沒提交的文件記錄,這樣就能防止別人將你的網站作為免費相冊空間了
2.5. 插件開發指南
標準插件開發流程:
設計插件圖標并在頁面中定義好CSS
定義插件參數并寫入初始化參數plugins
編寫插件調用時要執行的代碼
下面我們就demo09中的一個最簡單插件作介紹:
<style type="text/css">
.testClassName {
background:transparent url(img/plugin.gif) no-repeat 20px 20px;
background-position:3px 3px;
}
</style>
test7:{c:'testClassName',t:'測試7:showIframeModal (Ctrl+7)',s:'ctrl+7',e:function(){
var _this=this;
_this.showIframeModal('測試showIframeModal接口','uploadgui.html',function(v){_this.loadBookmark();_this.pasteText('返回值:/r/n'+v);},500,300);
}}
這個插件實現的功能是打開一個iframe,并將iframe返回的參數字符串插入到當前編輯器光標處。
其中test7為插件的name,用來在tools初始化參數中調用
c:'testClassName'為插件的樣式名稱
t:'測試7:showIframeModal (Ctrl+7)'是鼠標放在按鈕上顯示的提示文字
s:'ctrl+7'是定義插件的快捷方式,在編輯器區域里按設置的快捷方式就會執行此插件事件;
e:function(){}為插件點擊后要執行的代碼
特別說明:
插件執行函數中可以用this.的方式調用2.3.章節中所有的API接口函數。如果使用回調函數,請將this變量保存在臨時變量中,例如_this;
在某些瀏覽器下,打開會轉移焦點的操作界面,會導致編輯區域焦點丟失。例如:showIframeModal,在回調函數中需先執行loadBookmark函數恢復焦點,之后才能調用pasteHTML等函數;
如果希望樣式表存儲在系統自帶的模板目錄ui.css中,請將插件對象樣式名留空,則會自動按照插件名來調用相應的樣式,例如:xhEdtBtnCut、xhEdtBtnCopy,其中的Cut和Copy是插件名;
若希望xhEditor開發團隊為您定制特殊的功能、皮膚和插件,請參閱我們提供的商業服務頁面。
2.6. 皮膚設計指南
xhEditor的皮膚保存在xheditor_skin文件夾中,每個皮膚一個子文件夾,文件夾結構如下:
xheditor_skin
└─default
├─ui.css
├─iframe.css
└─img
├─icons.gif
├─...
└─loading.gif
編輯器按鈕、面板、模式窗口等樣式全部統一存儲在ui.css文件中
編輯區域的樣式存儲在iframe.css文件中
編輯器內核用到的圖片及css文件中用到的所有圖片統一存儲在img文件夾中
ui.css文件簡單解析
xheLayout:編輯器table樣式;xheTool:工具按鈕所在區域的樣式;xheButton:按鈕樣式;xhePanel:操作面板的樣式;xheMenu:菜單樣式;xheEmot:表情樣式;xheColor:顏色選擇器的樣式;xheDialog:面板上的對話框樣式;xheModal:模式窗口樣式;
xhEditor皮膚結構相對非常簡單,有一定的HTML和CSS設計基礎即可完成設計工作。
若希望xhEditor開發團隊為您定制特殊的功能、皮膚和插件,請參閱我們提供的商業服務頁面。
2.7. 關于二次開發
由于二次開發相對復雜度較高,需要對xhEditor源代碼結構熟悉,而開發者的水平有高有低,因此容易出現的問題也五花八門。鑒于這個原因,xhEditor開發團隊對非商業授權用戶不提供任何的技術文檔和技術支持,希望大家理解。
若希望xhEditor開發團隊為您定制特殊的功能、皮膚和插件,請參閱我們提供的商業服務頁面。
3. 其它相關
3.1. 使用常見問題
3.1. 使用常見問題
xhEditor能兼容哪些jQuery版本?
我的網頁是GB2312編碼的,怎樣才能使xhEditor編輯器沒有亂碼?
正常加載了xhEditor,讀取textarea的value值,為什么讀取不到最新編輯結果?
怎么添加自定義的表情?
怎么覆蓋編輯器自帶的默認表情?
當前頁面設置了document.domain,如何讓xhEditor工作正常?
textarea處在隱藏的區域中,如何初始化編輯器?
使用普通表單提交,怎么每次服務端取到的值總是之前舊的編輯結果?
xhEditor能兼容哪些jQuery版本?
xhEditor最初的版本是基于jQuery 1.3.2開發的,因此目前v1.0系列的所有版本都能最大的兼容1.3.2。為了獲得更好的代碼性能,目前xhEditor官方更建議使用最新的1.4.2版本。
雖然說v1.0版本系列能最大的兼容jQuery 1.3.2,但是在實際測試過程中,也發現一個不可修正的問題:在IE6下無法使用縮略圖上傳模式。如果你不需要使用縮略圖模式,可以在jQuery 1.3.2基礎上完美的運行xhEditor v1.0版本系列。
我的網頁是GB2312編碼的,怎樣才能使xhEditor編輯器沒有亂碼?
如果使用最新版xhEditor的mini壓縮版本,因為里面的文字完全utf-8編碼化,可以直接調用,不會出現亂碼現象。
如果使用的是源代碼js文件或早期的xhEditor版本,在非utf-8編碼的網頁中使用就會出現亂碼現象,只需將script的charset屬性設置成utf-8即可完美解決:
<script type="text/javascript" charset="utf-8" src="xheditor-zh-cn.js"></script>
正常加載了xhEditor,讀取textarea的value值,為什么讀取不到最新編輯結果?
目前網絡中所有的在線編輯器都是利用新創建的iframe來實現可視化編輯功能,xhEditor也不例外,所以在提交前必需要將最新的編輯結果重新同步到原來的textarea。
xhEditor默認會在textarea所在的form對象中綁定onsubmit事件,當用戶點擊submit按鈕時,xhEditor就會將最新結果同步回textarea,隨后隨表單中的其它表單項一同提交到服務端腳本。因此,如果不需要用Javascript額外處理,普通的表單式提交是沒任何問題的。
如果網頁中需要用Javascript額外處理編輯結果,比如ajax提交表單,則有三種解決方案:
使用jQuery的事件綁定或者標準DOM綁定方法在form上綁定submit事件(綁定代碼必需在xhEditor初始化代碼后面),即是在xhEditor把值回傳后再讀取,在相應綁定的函數中讀取textarea的value值即是最新編輯結果;
使用jQuery的標準取值方法:$('#textarea_id').val();
使用xhEditor提供的專用讀值API接口:editor.getSource();
怎么添加自定義的表情?
可以在初始化參數中使用emots參數來自
新聞熱點
疑難解答