XHEditor使用文檔

來源:互聯網
上載者:User

1. 下載xhEditor最新版本。:http://code.google.com/p/xheditor/downloads/list

2. 解壓zip檔案,將其中的xheditor.js以及xheditor_emot和xheditor_skin兩個檔案夾上傳到網站相應目錄

3. 在相應html檔案的head標籤結束之前添加

<script type="text/javascript" src="http://static.xxx.com/js/xheditor.js"></script>
4. 調用方法有兩種:

方法1:在textarea上添加屬性: class="xheditor"(設定為xheditor-mini和xheditor-simple,分別預設載入迷你和簡單工具列)方法2:在您的頁面初始JS代碼裡加上: $('#elm1').xheditor(true);例如:$({$('#elm1').xheditor(true);});相應的隱藏編輯的代碼為:$('#elm1').xheditor(false);
初始化參數說明
初始化範例程式碼:

$('#elm1').xheditor(true,{tools:'full',skin:'default',showBlocktag:true,readonly:false,internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://pirate9.com/test.css',fullscreen:true,sourceMode:true,forcePtag:true,upImgUrl:"upload.php",upImgExt:"jpg,jpeg,gif,png",keepValue:true,plugins:{}});
tools:自訂工具按鈕

參數值:full(完全),simple(簡單),mini(迷你)或者自訂字串,例如:'GStart,Cut,Copy,Paste,Pastetext,GEnd,Separator,GStart,Source,Preview,Fullscreen,About,GEnd'完整按鈕表:GStart:組開始GEnd:組結束Separator:分隔字元Cut:剪下Copy:複製Paste:粘貼Pastetext:文本粘貼Blocktag:段落標籤Fontface:字型FontSize:字型大小Bold:粗體Italic:斜體Underline:底線Strikethrough:中劃線FontColor:字型顏色BackColor:字型背景色Removeformat:刪除文字格式Align:對齊List:列表Outdent:減少縮排Indent:增加縮排Link:超連結Unlink:刪除連結Img:圖片Flash:Flash動畫Media:Windows media player視頻Emot:表情Table:表格Source:切換原始碼模式Preview:切換預覽模式Fullscreen:切換全螢幕模式About:關於xhEditor
skin:皮膚風格選擇

參數值:default(預設風格),o2007blue(Office 2007 藍色),o2007silver(Office 2007 銀色)
showBlocktag:顯示段落標籤

參數值:true(顯示段落標籤),false(不顯示)
internalScript:內部JS代碼保留狀態

參數值:true(保留內部JS代碼),false(清理內部JS代碼)
inlineScript:內聯JS代碼保留狀態

參數值:true(保留內聯JS代碼),false(清理內聯JS代碼)
internalStyle:內部樣式保留狀態

參數值:true(保留內部樣式),false(清理內部樣式)
inlineStyle:內聯樣式保留狀態

參數值:true(保留內聯樣式),false(清理內聯樣式)
width:編輯器寬度

參數值:不帶單位的數字,例:300
height:編輯器高度

參數值:不帶單位的數字,例:100
loadCSS:載入樣式

參數值:樣式表網址,例如:'http://static.pirate9.com/css/global.css'
fullscreen:預設全螢幕顯示

參數值:true(全屏大小),false(標準大小)
readonly:預設唯讀模式

參數值:true(唯讀模式),false(可編輯模式)
sourceMode:預設原始碼模式

參數值:true(原始碼模式),false(編輯模式)
forcePtag:強制P標籤

參數值:true(強制使用P標籤),false(不強制)
keepValue:自動儲存src和href屬性值

參數值:true(儲存),false(不儲存)說明:在IE等瀏覽器下使用編輯器,插入的圖片和連結地址都會被瀏覽器自動轉為絕對位址,比如輸入:a.gif,自動會轉為:http://test.com/a.gif
modalWidth:showModal快顯視窗的預設寬度

參數值:數值,預設為350說明:快顯視窗的預設寬度
modalHeight:showModal快顯視窗的預設高度

參數值:數值,預設為220說明:快顯視窗的預設高度
modalTitle:showModal快顯視窗是否顯示上方的標題列

參數值:true(顯示),false(不顯示)說明:控制快顯視窗是否顯示上方的標題列,預設為顯示,若需要顯示一個更定製個人化的iframe視窗,可通過此參數隱藏上方的標題列
upLinkUrl:超連結檔案上傳接收URL

參數值:接收使用者上傳的伺服器端程式URL,預設留空為禁用超連結上傳功能,具體使用方法請參考demo8示範檔案
upLinkExt:超連結上傳前限制本地副檔名

參數值:超連結上傳前限制的副檔名列表,預設為:zip,rar,txt,建議與服務端副檔名檢查列表一致
upImgUrl:圖片檔案上傳接收URL

參數值:接收使用者上傳的伺服器端程式URL,預設留空為禁用上傳功能,具體使用方法請參考demo8示範檔案
upImgExt:圖片上傳前限制本地副檔名

參數值:圖片上傳前限制的副檔名列表,預設為:jpg,jpeg,gif,png,建議與服務端副檔名檢查列表一致
upFlashUrl:動畫檔案上傳接收URL

參數值:接收使用者上傳的伺服器端程式URL,預設留空為禁用上傳功能,具體使用方法請參考demo8示範檔案
upFlashExt:動畫上傳前限制本地副檔名

參數值:動畫上傳前限制的副檔名列表,預設為:swf,建議與服務端副檔名檢查列表一致
upMediaUrl:視頻檔案上傳接收URL

參數值:接收使用者上傳的伺服器端程式URL,預設留空為禁用上傳功能,具體使用方法請參考demo8示範檔案
upMediaExt:視頻上傳前限制本地副檔名

參數值:視頻上傳前限制的副檔名列表,預設為:avi,建議與服務端副檔名檢查列表一致
上傳介面使用注意事項:

demos目錄中的upload.php僅為示範代碼,若您使用的是其它的伺服器指令碼語言,請自行對初始化參數中的upLinkUrl、upImgUrl、upFlashUrl和upMediaUrl進行修改,並開發相應伺服器上傳接收程式。若您希望在自己的項目中實際使用,請自行修改代碼或者重新開發,開發過程中請注意上傳檔案的格式及大小限制,注意伺服器安全問題。 上傳接收程式開發規範:1,上傳檔案網域名稱字為:upload2,返回結構必需為json,並且結構如下:{"err":"","msg":"200906030521128703.gif"}若上傳出現錯誤,請將錯誤內容儲存在err變數中;若上傳成功,請將伺服器上的絕對或者相對位址儲存在msg變數中。編輯器若發現返回的err變數不為空白,則快顯視窗顯示返回的錯誤內容。上傳管理方案建議:1,在編輯器初始化時在upload.php後面跟上一個伺服器產生的絕對唯一的跟蹤值,例如:upload.php?infoid=1213121212,在伺服器接收程式中以這個跟蹤值儲存到資料庫中,同時也可以限制單個跟蹤值下總上傳檔案數或者總檔案大小,否則就是一個可以上傳無限個檔案的漏洞了3,最終當前表單提交時,再根據編輯器提交的HTML內容和資料庫中上傳內容進行比較,刪除所有沒有使用的上傳檔案4,定期由伺服器指令碼刪除上傳資料庫中沒提交的檔案記錄,這樣就能防止別人將您的網站作為免費相簿空間了
plugins:自訂按鈕之外掛程式擴充

外掛程式對象的屬性解釋:c:樣式表名稱 t:外掛程式名字(滑鼠在按鈕上方時顯示) s:捷徑 e:按鈕點擊後需要執行的代碼特別說明:如果您希望樣式表儲存在系統內建的模板目錄ui.css中,請將外掛程式對象的樣式名留空,則會自動按照外掛程式名來調用相應的樣式,例如:xhEdtBtnCut、xhEdtBtnCopy,其中的Cut和Copy是外掛程式名具體調用方法請參考示範檔案夾中的demo9
JS介面說明
JS介面範例程式碼:

var editor=$('#elm1').xheditor(true,{tools:'full',skin:'default',internalScript:false,internalStyle:false,width:300,height:200,loadCSS:'http://pirate9.com/test.css',fullscreen:true,beforeSetSource:ubb2html,beforeGetSource:html2ubb,focus:focusAction,blur:blurAction})[0].xheditor;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.togglePreview()editor.toggleFullscreen()editor.toggleReadonly()alert(editor.settings.upImgExt);editor.settings.upImgExt='txt,doc';
focus:使編輯器獲得焦點

無參數
setSource:設定編輯器原始碼

參數1:要設定的原始碼內容,例:'<p>aaa</p>'
getSource:返回編輯器格式後的原始碼

無參數
appendHTML:粘貼HTML內容到編輯器結尾處

參數1:要粘貼的HTML代碼,例:'<p>uuu</p>'註:0.9.5版添加
pasteHTML:粘貼HTML內容到編輯器當前游標處

參數1:要粘貼的HTML代碼,例:'<p>uuu</p>'
pasteText:粘貼文本到編輯器當前游標處

參數1:要粘貼的文本,例:'這裡的內容完全原樣顯示<strong>aaa</strong>'
formatXHTML:格式化XHTML代碼

參數1:需要格式化的HTML代碼,例:'<b>aaa</b>',返回'<strong>aaa</strong>'
toggleSource:在原始碼模式和編輯模式之間切換

參數1:空(切換),true(顯示原始碼模式),false(顯示編輯模式)
togglePreview:在預覽模式和編輯模式之間切換

參數1:空(切換),true(顯示預覽模式),false(顯示編輯模式)
toggleFullscreen:在全螢幕模式和標準大小之間切換

參數1:空(切換),true(顯示全螢幕模式),false(顯示標準模式)
toggleReadonly:在唯讀模式和可編輯模式之間切換

參數1:空(切換),true(切換為唯讀模式),false(切換為可編輯模式)
settings:擷取或者修改編輯器內部參數

internalScript:是否清除內部代碼inlineScript:是否清除內聯代碼internalStyle:是否清除內部樣式inlineStyle:是否清除內聯樣式forcePtag:強制使用P標籤keepValue:保持屬性值upLinkUrl:超連結上傳介面地址upLinkExt:超連結本地上傳擴充限制upImgUrl:圖片上傳介面地址upImgExt:圖片本地上傳擴充限制upFlashUrl:動畫上傳介面地址upFlashExt:動畫本地上傳擴充限制upMediaUrl:視頻上傳介面地址upMediaExt:視頻本地上傳擴充限制beforeSetSource:在設定原始碼到編輯器前調用此函數beforeGetSource:從編輯器返回原始碼前調用此函數focus:編輯器獲得焦點時回調此函數blur:編輯器失去焦點時回調此函數註:修改有效變數僅限以上,其它的變數都僅在編輯器初始化時使用
編輯器初始化回呼函數列表:

beforeSetSource和beforeGetSource是編輯器回呼函數,分別在設定原始碼和取回原始碼之前調用,詳細使用方法可參考UBB代碼示範頁面focus和blur是編輯器聚焦和失去焦點時的回呼函數

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.