欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久

打開(kāi)APP
userphoto
未登錄

開(kāi)通VIP,暢享免費電子書(shū)等14項超值服

開(kāi)通VIP
百度編輯器-Ueditor

(Lionden<hsdlionden@gmail.com> 轉載說(shuō)明)  

  前段時(shí)間發(fā)表過(guò)一篇關(guān)于“KindEditor在JSP中使用”的博文。這幾天在沈陽(yáng)東軟進(jìn)行JavaWeb方面的實(shí)習工作,在一個(gè)CMS系統的后臺和博客板塊中又要用到文本編輯器,突然發(fā)現了這個(gè)——百度編輯器(官網(wǎng)http://ueditor.baidu.com/website/index.html)。

  Ueditor由百度開(kāi)發(fā),傳說(shuō)中的百度更懂中文嘛,不像KindEditor有時(shí)會(huì )顯示亂碼。Ueditor提供中文“utf-8”和“gbk”版本的下載。而且分為完整版和定制版。完整版沒(méi)什么可說(shuō)的,下面說(shuō)下定制版:

  定制版就是可以選擇自己需要的功能,然后根據用戶(hù)所選組件生成下載包。地址(http://ueditor.baidu.com/website/ipanel/panel.html)。定制的內容包括組件,編輯器背景顏色或圖片,編輯器高度和寬度等;

  值得一提的是,Ueditor提供了功能說(shuō)明文檔和使用說(shuō)明文檔??梢宰岄_(kāi)發(fā)者快速的清楚他能實(shí)現的功能,并節約閱讀原JS代碼的時(shí)間,熟練的使用Ueditor。文檔鏈接(http://ueditor.baidu.com/website/document.html),附使用說(shuō)明文檔(摘自Ueditor官網(wǎng)):

前后端數據交互

2012-05-11 16:09:13

一、富文本內容交互

1、編輯器內容初始化(即往編輯器中設置富文本)

場(chǎng)景一:寫(xiě)新文章,編輯器中預置提示、問(wèn)候等內容。

在editor_config.js文件中找到initialContent參數,設置其值為需要的提示或者問(wèn)候語(yǔ)即可,如initialContent:’歡迎使用UEditor!’。

場(chǎng)景二:編輯舊文章,從數據庫中取出富文本放置到編輯器中。

顯然,編輯文章時(shí)需要從后臺數據庫中取出大段富文本,如果仍然采用場(chǎng)景一中的方式去設置初始值的話(huà),必然會(huì )帶來(lái)諸如引號匹配被截斷等問(wèn)題,因此需要采用另外一種方式去設置,如下代碼所示:

1
2
3
<script type="text/plain" id="editor">
    //從數據庫中取出文章內容打印到此處
</script>

此處采用了script標簽作為編輯器容器對象,并設置了其類(lèi)型是純文本,從而在避免了標簽內部JS代碼執行的同時(shí)解決了部分同學(xué)在使用傳統的textarea標簽作為容器所帶來(lái)的一次額外轉碼問(wèn)題。

2、提交編輯器內容至后端

場(chǎng)景一:在編輯器所在的Form中存在提交按鈕,提交動(dòng)作由點(diǎn)擊此按鈕完成。

該場(chǎng)景適用于最普通的場(chǎng)合,沒(méi)有太大問(wèn)題需要注意,僅三點(diǎn)說(shuō)明:

1) 默認情況下提交到后臺的表單名稱(chēng)是 “editorValue”,在editor_config.js中可以配置,參數名為textarea。

2) 可以在容器標簽(即script標簽)上設置name屬性,以覆蓋editor_config.js中的默認配置。實(shí)例代碼如下,此處的myContent將成為新的提交表單名稱(chēng):

1
2
3
4
5
<form action="" method="post">
    <script type="text/plain" id="editor" name="myContent">
    </script>
    <input type="submit" name="submit" value="提交">
</form>

3)后端接收程序可以通過(guò)如下幾種方式來(lái)獲取編輯器中的富文本內容。

1
2
3
4
5
6
7
8
9
10
11
//PHP獲?。?/code>
$_POST["myContent"]
     
//JSP獲?。?/code>
request.getParameter("myContent");
     
//ASP獲?。?/code>
request("myContent");
     
//NET獲取:
context.Request.Form["myContent"];

場(chǎng)景二:編輯器所在的Form中不存在提交按鈕,提交動(dòng)作由外部事件觸發(fā)。

該場(chǎng)景適用于站點(diǎn)前端交互較多的場(chǎng)合,需要注意的事項主要是在觸發(fā)form提交動(dòng)作之前執行編輯器內容同步操作。一般的代碼模式如下所示:    

1
2
3
4
5
//滿(mǎn)足提交條件時(shí)同步內容并提交,此處editor為編輯器實(shí)例
if(editor.hasContent()){ //此處以非空為例
    editor.sync();       //同步內容
    someForm.submit();   //提交Form
}

此處editor是編輯器實(shí)例對象。

場(chǎng)景三:編輯器不在任何Form中,提交動(dòng)作由外部事件觸發(fā)。

該場(chǎng)景使用不多,但特殊時(shí)候可能需要。UEditor也提供了對應的處理方案,基本邏輯跟場(chǎng)景二一樣,只是在執行同步操作的時(shí)候需要傳入提交form的id,如editor.sync(myFormID)即可。其他同場(chǎng)景二。

二、圖片上傳交互

1、傳統圖片上傳

傳統圖片上傳涉及到的前后端交互主要涉及“上傳提交路徑”以及“圖片保存路徑”兩個(gè)參數,后臺保存路徑以任何形式(絕對或者相對)、在任何頁(yè)面展示跟前臺無(wú)關(guān)。

2、Flash圖片上傳

Flahs圖片上傳和傳統圖片上傳存在一個(gè)很大的區別:它需要服務(wù)器端實(shí)時(shí)返回“圖片保存路徑”用于在前臺的即時(shí)展示。具體到編輯器,就是需要將返回的路徑插入到編輯器中。由此會(huì )引出除傳統圖片上傳中提到的兩個(gè)參數之外的第三個(gè)參數:“前后端修正路徑”。如果后臺返回的保存路徑是絕對路徑(指以http開(kāi)頭的路徑,以根目錄開(kāi)始的路徑也可勉強歸入其中),那么前臺無(wú)須做任何修正,否則用戶(hù)必須十分清楚自己當前的目錄結構并據此修正這個(gè)前后端相對路徑之間的差異。因此,UEditor極力推薦由服務(wù)器端返回以根目錄開(kāi)始的相對路徑。

3、UEditor中的上傳實(shí)踐及注意事項

在UEditor中,“上傳提交路徑”和“前后端修正路徑”的配置位于editor_config.js中。其中,imageUrl參數對應著(zhù)“上傳提交路徑”,imagePath參數對應著(zhù)“前后端修正路徑”。而“圖片保存路徑”則需要在server/upload/php目錄下的imageUp文件中配置。

路徑配置完成之后,還需要配置imageFieldName參數作為文件表單的表單名,后臺可以據此獲取文件句柄。該參數同樣位于editor_config.js中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//圖片上傳提交地址
imageUrl:URL+"server/upload/php/imageUp.php",
         
//圖片修正地址,引用了fixedImagePath,如有特殊需求,可自行配置 
imagePath:fixedImagePath,
         
//圖片描述的key             
imageFieldName:"upFile",
         
//等比壓縮的基準,確定maxImageSideLength參數的參照對象.
//0為按照最長(cháng)邊,1為按照寬度,2為按照高度                      
compressSide:0,   
         
//上傳圖片最大允許的邊長(cháng),超過(guò)會(huì )自動(dòng)等比縮放,不縮放就設置一個(gè)比較大的值
//更多設置在image.html中                          
maxImageSideLength:900

完成上述配置之后,理論上后臺應該可以接收到前臺上傳的圖片文件了。在正確保存之后,傳統圖片上傳至此就結束了。但是,在使用Flash上傳的編輯器中,流程還遠未結束。

首先,后臺需要計算得出圖片文件存放的地址字符串。該字符串UEditor極力推薦使用從網(wǎng)站根目錄開(kāi)始算起,一直到圖片名結束為止。如果不從網(wǎng)站根目錄開(kāi)始算起,后面需要考慮“前后端修正地址”參數。

其次,后臺返回一個(gè)json格式的字符串,格式具體要求如下:

1
"url":"圖片地址""title":"圖片描述""state":"上傳狀態(tài)" }

其中,url對應計算出的圖片保存地址——再強調一遍,盡量構造出從網(wǎng)站根目錄開(kāi)始的地址字符串;title對應flash中的描述字段,在圖片上將會(huì )被設置到title屬性中;state對應服務(wù)器端返回的圖片上傳狀態(tài)字符:除了上傳成功返回“SUCCESS”之外,其他任何值都將被直接顯示在返回的圖片描述字段內。

最后,UEditor會(huì )在返回的url地址前面增加“前后端修整路徑”這個(gè)參數值作為最后插入編輯器中的圖片地址。因此,如果服務(wù)器端返回的是從根目錄開(kāi)始的圖片路徑或者http開(kāi)頭的絕對路徑,“前后端修正路徑”必須留空。

舉例來(lái)講,如果服務(wù)器返回的路徑是“/myProject/uploads/sun.jpg”,那么插入到編輯器中的路徑會(huì )是“前后端修正路徑 +  /myProject/uploads/sun.jpg”。

三、Word圖片轉存交互

1、圖片轉存原理

    所謂word圖片轉存,是指UEditor為了解決用戶(hù)從word中復制了一篇圖文混排的文章粘貼到編輯器之后,word文章中的圖片數據無(wú)法顯示在編輯器中,也無(wú)法提交到服務(wù)器上的問(wèn)題而開(kāi)發(fā)的一個(gè)操作簡(jiǎn)便的圖片轉存方案。

    該功能的基本操作步驟:復制word文檔——》粘貼到編輯器——》編輯器會(huì )將所有圖片轉換成一個(gè)占位圖,同時(shí)在工具欄中高亮轉存按鈕——》點(diǎn)擊轉存按鈕彈出圖片上傳框——》點(diǎn)擊復制按鈕復制圖片目錄地址——》點(diǎn)擊“添加照片”按鈕,在彈出的選擇框中粘貼剛復制的圖片目錄地址——》點(diǎn)擊打開(kāi)按鈕,選擇目錄下的所有圖片文件,在此點(diǎn)擊打開(kāi)——》執行圖片上傳——》上傳成功確認插入,UEditor將自動(dòng)完成對應占位圖的替換過(guò)程。

2、配置要點(diǎn)及注意事項

    word圖片轉存跟普通圖片上傳的配置基本一樣,所不同的僅僅是操作上的差異:前者需要首先獲取臨時(shí)圖片文件存在的目錄,后者直接選擇自己指定的文件目錄。PS:在部分操作系統的部分版本word中發(fā)現單張word圖片會(huì )生成兩張臨時(shí)圖片,且格式不一,清晰度各異,目前暫時(shí)未發(fā)現改進(jìn)方法。

四、遠程圖片抓取交互

1、遠程抓取原理

    圖片遠程抓取是指在插入本地域名之外的圖片鏈接地址時(shí),由服務(wù)器將這些外部圖片抓取到本地服務(wù)器保存的一個(gè)功能。實(shí)現原理為在編輯器中向服務(wù)器發(fā)送包含所有外域圖片地址的ajax請求,然后由服務(wù)器在后端抓取保存后返回圖片地址給編輯器,再由編輯器完成外域地址和本地地址的替換工作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//是否開(kāi)啟遠程圖片抓取
catchRemoteImageEnable:true,
                                         
//處理遠程圖片抓取的地址
catcherUrl:URL +"server/submit/php/getRemoteImage.php"
               
//提交到后臺遠程圖片uri合集的表單名
catchFieldName:"upFile",    
                                           
//圖片修正地址,同imagePath
catcherPath:fixedImagePath,
         
//本地頂級域名,當開(kāi)啟遠程圖片抓取時(shí),除此之外的所有其它域名下的
//圖片都將被抓取到本地                                  
localDomain:["baidu.com","10.81.2.114"],

2、注意事項

    遠程抓取功能是否開(kāi)啟可在edicot_config.js中通過(guò)配置catchRemoteImageEnable參數實(shí)現。與這個(gè)功能相關(guān)的配置還包括了遠程抓取的處理程序地址,表單域名稱(chēng),本地域和“前后端修正地址”。遠程抓取處理程序實(shí)現了依據前端提交的地址列表(使用ue_separate_ue標示符進(jìn)行分隔的字符串)進(jìn)行圖片抓取,然后返回地址列表給客戶(hù)端的功能。

    前后臺交互數據格式樣例:(URL1,URL2,URL3,URL4)   

1
URL1ue_separate_ueURL2ue_separate_ueURL3ue_separate_ueURL4

五、圖片在線(xiàn)管理交互

1、圖片在線(xiàn)管理介紹

    圖片在線(xiàn)管理是指通過(guò)讀取服務(wù)器端的文件目錄并將其展示到編輯器中的進(jìn)行額外一些操作的功能。處于安全考慮,目前UEditor僅實(shí)現了圖片二次插入操作,其他諸如刪除、移動(dòng)等操作將會(huì )在后續二次開(kāi)發(fā)教程中陸續放出。

1
2
3
4
5
//圖片在線(xiàn)管理的處理地址       
imageManagerUrl:URL + "server/submit/php/imageManager.php",
               
//圖片修正地址,同imagePath       
imageManagerPath:fixedImagePath

2、注意事項

    圖片在線(xiàn)管理需要配置的參數跟遠程圖片抓取一致,兩者不同的地方是圖片在線(xiàn)管理中的圖片數據是由服務(wù)器端指定某個(gè)目錄,然后遍歷其下的所有圖片文件得到,然后將地址返回給編輯器,而遠程圖片抓取則是由編輯器提交圖片地址,經(jīng)過(guò)服務(wù)器端的抓取處理后返回新的地址給編輯器。兩者的初始觸發(fā)都需要ajax的介入。

六、屏幕截圖交互

1、屏幕截圖介紹 

    使用了ActiveX控件,目前只支持IE瀏覽器。

2、注意事項

    需要配置的參數除了跟圖片上傳一樣的內容之外,還多出了服務(wù)器地址和端口的配置。具體使用時(shí)請根據自身服務(wù)器的特點(diǎn)做出適應修改。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//屏幕截圖的server端文件所在的網(wǎng)站地址或者ip,請不要加http://
snapscreenHost: '127.0.0.1',    
        
//屏幕截圖的server端保存程序,UEditor的范例代碼為“URL                             
snapscreenServerUrl: URL +"server/upload/php/snapImgUp.php", +"server/upload/php/snapImgUp.php"
        
//屏幕截圖的server端端口
snapscreenServerPort: 80
        
//截圖的圖片默認的排版方式                                
snapscreenImgAlign: 'center'
        
//截圖顯示修正地址                             
snapscreenPath: fixedImagePath,

七、附件上傳交互

1、附件上傳注意事項

    附件上傳的基本配置跟圖片類(lèi)似。另外,由于附件上傳采用了相當成熟的swfupload開(kāi)源框架,因此大部分的文檔和資料盡可參考swfupload的官網(wǎng)教程。官網(wǎng)地址:http://www.swfupload.org

  Ueditor的部署說(shuō)明(摘自Ueditor官網(wǎng)):

完整版的部署與體驗

2012-05-11 16:16:57

一、官網(wǎng)上下載完整源碼包,解壓到任意目錄,解壓后的源碼目錄結構如下所示:

    _examples:編輯器完整版的示例頁(yè)面

    _demos:編輯器的各種使用案例

    dialogs:彈出對話(huà)框對應的資源和JS文件

    themes:樣式圖片和樣式文件

    server:涉及到服務(wù)器端操作的PHP、JSP等文件

    third-party:第三方插件

    editor_all.js:_src目錄下所有文件的打包文件

    editor_all_min.js:editor_all.js文件的壓縮版,建議在正式部署時(shí)才采用

    editor_config.js:編輯器的配置文件,建議和編輯器實(shí)例化頁(yè)面置于同一目錄


二、部署UEditor到實(shí)際項目(UETest)中的步驟:

            圖表 1

第一步:在項目的任一文件夾中建立一個(gè)用于存放UEditor相關(guān)資源和文件的目錄,此處在項目根目錄下建立,起名為ueditor。

第二步:拷貝源碼包中的dialogs、themes、third-party、editor_all.js和editor_config.js到ueditor文夾中。其中,除了ueditor目錄之外的其余文件均為具體項目文件,此處所列僅供示例。

第三步:為簡(jiǎn)單起見(jiàn),此處將以根目錄下的index.php頁(yè)面作為編輯器的實(shí)例化頁(yè)面,用來(lái)展示UEditor的完整版效果。在index.php文件中,首先導入編輯器需要的三個(gè)入口文件,示例代碼如下:

1
2
3
4
5
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>編輯器完整版實(shí)例</title>
<script type="text/javascript" src="ueditor/editor_config.js"></script>
<script type="text/javascript" src="ueditor/editor_all.js"></script>
<link rel="stylesheet" href="ueditor/themes/default/ueditor.css">

第四步:然后在index.php文件中創(chuàng )建編輯器實(shí)例及其DOM容器。具體代碼示例如下:

1
2
3
4
5
<div id="myEditor"></div>
<script type="text/javascript">
    var editor = new baidu.editor.ui.Editor();
    editor.render("myEditor");
</script>

最后一步: 在/UETest/ueditor/ editor_config.js中查找URL變量配置編輯器在你項目中的路徑。

1
2
//強烈推薦以這種方式進(jìn)行絕對路徑配置
URL= window.UEDITOR_HOME_URL||"/UETest/ueditor/";

至此,一個(gè)完整的編輯器實(shí)例就已經(jīng)部署到咱們的項目中了!在瀏覽器中輸入http://localhost/UETest 運行下試試UE強大的功能吧! 

三、注意事項

1.在引用editor_config.js時(shí),最好先于editor_all.js加載,否則特定情況下可能會(huì )出現報錯。

2.若希望給編輯器賦初值,請將上面描述index.php的div換成初始內容

3. 需要注意的是編輯器資源文件根路徑。它所表示的含義是:以編輯器實(shí)例化頁(yè)面為當前路徑,指向編輯器資源文件(即dialog等文件夾)的路徑。鑒于很多同學(xué)在使用編輯器的時(shí)候出現的種種路徑問(wèn)題,此處強烈建議大家使用"相對于網(wǎng)站根目錄的相對路徑"進(jìn)行配置。"相對于網(wǎng)站根目錄的相對路徑"也就是以斜杠開(kāi)頭的形如"/UETest/ueditor/"這樣的路徑。

此外如果你使用的是相對路徑,例如"ueditor/"(相對于圖表1路徑結構)

如果站點(diǎn)中有多個(gè)不在同一層級的頁(yè)面需要實(shí)例化編輯器,且引用了同一UEditor的時(shí)候,可能不適用于每個(gè)頁(yè)面的編輯器。因此,UEditor提供了針對不同頁(yè)面的編輯器可單獨配置的根路徑,具體來(lái)說(shuō),在需要實(shí)例化編輯器的頁(yè)面最頂部寫(xiě)上如下代碼即可。

當然,需要令此處的URL等于對應的配置。window.UEDITOR_HOME_URL ="/xxxx/xxxx/";

本站僅提供存儲服務(wù),所有內容均由用戶(hù)發(fā)布,如發(fā)現有害或侵權內容,請點(diǎn)擊舉報。
打開(kāi)APP,閱讀全文并永久保存 查看更多類(lèi)似文章
猜你喜歡
類(lèi)似文章
百度UEditor編輯器使用教程與使用方法
二.百度UEditor編輯器之配置文件:ueditor.config.js
UEditor(Java版本)安裝與部署
HTML編輯器UEditor的簡(jiǎn)單使用
vue加載百度Ueditor編輯器
富文本編輯器UEditor的安裝配置,及PHP版本服務(wù)器端上傳設置
更多類(lèi)似文章 >>
生活服務(wù)
分享 收藏 導長(cháng)圖 關(guān)注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權!
如果VIP功能使用有故障,
可點(diǎn)擊這里聯(lián)系客服!

聯(lián)系客服

欧美性猛交XXXX免费看蜜桃,成人网18免费韩国,亚洲国产成人精品区综合,欧美日韩一区二区三区高清不卡,亚洲综合一区二区精品久久