久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

ckeditor3.6.5+ckfinder2.0.2+jsp編輯器配置 支持服務(wù)器瀏覽/上傳圖片、Flash

 看見(jiàn)就非常 2014-12-03

             一,、相信很多人都用過(guò)大名鼎鼎的FckEditor,，   最新又出來(lái)了個(gè)ckEditor,， 令人一下子搞不清楚， 到官方網(wǎng)站看看才知道FckEditor在2.6版本之后就改名為ckEditor了,， 在這里特別說(shuō)明一下,， 以免混淆,，因?yàn)榫W(wǎng)上搜出來(lái)的大多都是FckEditor相關(guān)配置的文章,。

            二、FckEditor里有java版本的配置,，相信有些同行用過(guò),，支持php、asp.net,、java版本,，現(xiàn)在一下子變?yōu)閏kEditor了。配置簡(jiǎn)單的編輯器很簡(jiǎn)單,，這里不多說(shuō)了,，我想大多數(shù)人都希望能用到編輯器里的瀏覽/插入圖片功能吧， 畢竟一條新聞沒(méi)個(gè)圖片說(shuō)不過(guò)去,。 當(dāng)然我們自己做個(gè)上傳功能,，然后復(fù)制URL地址插入到URL里也是可以的。 但是這樣客戶操作難度太高了,。

            三,、這里介紹一下解決辦法，看到有個(gè)哥們的文章說(shuō)ckEditor理把自帶的上傳功能去掉了,， 需要修改config.js文件里的幾個(gè)屬性

 config.filebrowserBrowseUrl = '/js/ckfinder/ckfinder.htm';
 config.filebrowserImageBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Images';
 config.filebrowserFlashBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Flash';
 config.filebrowserUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
 config.filebrowserImageUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
 config.filebrowserFlashUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

需要自己寫(xiě)這個(gè)上傳附件和瀏覽服務(wù)器文件的方法,， 這哥們還真的自己寫(xiě)了， 遺憾的是只給出部分代碼,。  自己寫(xiě)上傳文件和瀏覽文件夾雖然說(shuō)不是什么難事,， 但難免有些繁瑣費(fèi)時(shí)。

           四,、于是自己抱有一點(diǎn)僥幸和偷懶的心理再google了幾下,， 發(fā)現(xiàn)一個(gè)關(guān)鍵字很頻繁出現(xiàn)： cdeditor+ckfinder   后面老跟著asp.net  php 之類(lèi)的。于是就不服氣滴想,，難道就沒(méi)有支持java的嗎,？   ckfinder不是專(zhuān)門(mén)為asp.net量身定做的吧？ 于是又仔細(xì)看了看cdeditor的官方網(wǎng)站,， 然后點(diǎn)擊了一下ckfinder鏈接,，  發(fā)現(xiàn)ckfinder已經(jīng)出了多個(gè)語(yǔ)言版本(php、asp.net等）   支持java是在2.0.2版本之后才出的,， 這也就難怪關(guān)于cdeditor3.6.5+ckfinder2.0.2+jsp的配置介紹文章很少了,，

這里方便大家下載我給個(gè)地址：

http:///download

http:///download       注意2.0.2版本以及以上的才支持java      （收費(fèi)的）

 

先上個(gè)效果圖再貼代碼！

點(diǎn)擊插入圖片圖標(biāo)

瀏覽/上傳圖片窗口

 

 

整合步驟：（注意紅色字體部分是前后相呼應(yīng)的）

1  下載的ckeditor-java-3.6.2.rar和ckfinder_java_2.0.2.zip解壓,， jsp頭部引入兩個(gè)頭文件

<script type="text/javascript" src="${base}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base}/js/ckfinder/ckfinder.js"></script>

 

2  在web.xml里添加,，  注意ckfinder版本是2.0.2       如果超過(guò)這版本,，servlet的類(lèi)名不一樣小心！ 

  1. <span style="font-size:16px;">    <!-- ckeditor和ckfinder整合上傳圖片   開(kāi)始 -->  
  2.     <servlet>  
  3.         <servlet-name>ConnectorServlet</servlet-name>  
  4.         <servlet-class><span style="color:#ff0000;">com.ckfinder.connector.ConnectorServlet</span></servlet-class>  
  5.         <init-param>  
  6.             <param-name>XMLConfig</param-name>  
  7.             <param-value>/WEB-INF/<span style="color:#ff0000;">ckfinder-config.xml</span></param-value>  
  8.         </init-param>  
  9.         <init-param>  
  10.             <param-name>debug</param-name>  
  11.             <param-value>false</param-value>  
  12.         </init-param>  
  13.         <load-on-startup>1</load-on-startup>  
  14.     </servlet>  
  15.     <servlet-mapping>  
  16.         <servlet-name>ConnectorServlet</servlet-name>  
  17.         <url-pattern>  
  18.             <span style="color:#ff0000;">/js/ckfinder/core/connector/java/connector.java</span>  
  19.         </url-pattern>  
  20.     </servlet-mapping>  
  21.     <!-- ckeditor和ckfinder整合上傳圖片 結(jié)束 --></span>  


3 在建立文件WEB-INF/ckfinder-config.xml   內(nèi)容如下（  紅色的 upload/ckfinder/代表工程里的路徑,，可以對(duì)照eclipse截圖

  1. <span style="font-size:18px;"><config>  
  2.     <enabled>true</enabled>  
  3.     <baseDir></baseDir>  
  4.     <baseURL><span style="color:#ff0000;"></span><span style="color:#ff0000;">upload/ckfinder/</span></baseURL>  
  5.     <licenseKey></licenseKey>  
  6.     <licenseName></licenseName>  
  7.     <imgWidth>1600</imgWidth>  
  8.     <imgHeight>1200</imgHeight>  
  9.     <imgQuality>80</imgQuality>  
  10.     <uriEncoding>UTF-8</uriEncoding>  
  11.     <forceASCII>false</forceASCII>  
  12.     <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>  
  13.     <checkDoubleExtension>true</checkDoubleExtension>  
  14.     <checkSizeAfterScaling>true</checkSizeAfterScaling>  
  15.     <secureImageUploads>true</secureImageUploads>  
  16.     <htmlExtensions>html,htm,xml,js</htmlExtensions>  
  17.     <hideFolders>  
  18.         <folder>.svn</folder>  
  19.         <folder>CVS</folder>  
  20.     </hideFolders>  
  21.     <hideFiles>  
  22.         <file>.*</file>  
  23.     </hideFiles>  
  24.     <defaultResourceTypes></defaultResourceTypes>  
  25.     <types>  
  26.         <type name="Files">  
  27.             <url>%BASE_URL%files/</url>  
  28.             <directory>%BASE_DIR%files</directory>  
  29.             <maxSize>10m</maxSize>  
  30.             <allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip  
  31.             </allowedExtensions>  
  32.             <deniedExtensions></deniedExtensions>  
  33.         </type>  
  34.         <type name="Images">  
  35.             <url>%BASE_URL%images/</url>  
  36.             <directory>%BASE_DIR%images</directory>  
  37.             <maxSize>2m</maxSize>  
  38.             <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>  
  39.             <deniedExtensions></deniedExtensions>  
  40.         </type>  
  41.         <type name="Flash">  
  42.             <url>%BASE_URL%flash/</url>  
  43.             <directory>%BASE_DIR%flash</directory>  
  44.             <maxSize>20m</maxSize>  
  45.             <allowedExtensions>swf,flv</allowedExtensions>  
  46.             <deniedExtensions></deniedExtensions>  
  47.         </type>  
  48.     </types>  
  49.     <accessControls>  
  50.         <accessControl>  
  51.             <role>*</role>  
  52.             <resourceType>*</resourceType>  
  53.             <folder>/</folder>  
  54.             <folderView>true</folderView>  
  55.             <folderCreate>true</folderCreate>  
  56.             <folderRename>false</folderRename>  
  57.             <folderDelete>false</folderDelete>  
  58.             <fileView>true</fileView>  
  59.             <fileUpload>true</fileUpload>  
  60.             <fileRename>false</fileRename>  
  61.             <fileDelete>false</fileDelete>  
  62.         </accessControl>  
  63.     </accessControls>  
  64.     <thumbs>  
  65.         <enabled>true</enabled>  
  66.         <url>%BASE_URL%_thumbs/</url>  
  67.         <directory>%BASE_DIR%_thumbs</directory>  
  68.         <directAccess>false</directAccess>  
  69.         <maxHeight>100</maxHeight>  
  70.         <maxWidth>100</maxWidth>  
  71.         <quality>80</quality>  
  72.     </thumbs>  
  73.     <plugins>  
  74.         <plugin>  
  75.             <name>imageresize</name>  
  76.             <class>com.ckfinder.connector.plugins.ImageResize</class>  
  77.             <params>  
  78.                 <param name="smallThumb" value="90x90"></param>  
  79.                 <param name="mediumThumb" value="120x120"></param>  
  80.                 <param name="largeThumb" value="180x180"></param>  
  81.             </params>  
  82.         </plugin>  
  83.         <plugin>  
  84.             <name>fileeditor</name>  
  85.             <class>com.ckfinder.connector.plugins.FileEditor</class>  
  86.             <params></params>  
  87.         </plugin>  
  88.     </plugins>  
  89.     <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>  
  90. </config></span>  


目錄結(jié)構(gòu)

 

4 修改/js/ckeditor/config.js里的內(nèi)容如下：

[javascript] view plaincopy
  1. <span style="font-size:18px;">CKEDITOR.editorConfig = function( config ){  
  2.     config.pasteFromWordIgnoreFontFace = true;   
  3.     config.language='zh-cn';  
  4.     config.uiColor='#AADC6E';  
  5.     config.enterMode=CKEDITOR.ENTER_DIV;  
  6.     config.shiftEnterMode=CKEDITOR.BR;  
  7.     config.skin='office2003';  
  8.     config.extraPlugins='autogrow';  
  9.     config.resize_maxHeight = 1000;  
  10.     config.resize_maxWidth = 960;//改變大小的最大寬度  
  11.     config.resize_minHeight = 250; //改變大小的最小高度  
  12.     config.resize_minWidth = 750;//改變大小的最小寬度  
  13.     config.toolbar = [  
  14.                 '/',  
  15.                 ['Preview','Cut','Copy','Paste','PasteFromWord','Print','Undo','Redo','Find','RemoveFormat ','Bold','Italic','Underline','Strike','-','NumberedList','BulletedList'],  
  16.                 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Image','Table','HorizontalRule','Smiley'],  
  17.                 ['Styles','Format','Font','FontSize'],  
  18.             ];  
  19.     config.filebrowserBrowseUrl='/js/ckfinder/ckfinder.html';  
  20.     config.filebrowserImageBrowseUrl=<span style="color:#ff0000;">'/js/ckfinder/ckfinder.html?type=Images'</span>;  
  21.     config.filebrowserFlashBrowseUrl='/js/ckfinder/ckfinder.html?type=Flash';  
  22.     config.filebrowserUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';  
  23.     config.filebrowserImageUploadUrl='/<span style="color:#ff0000;">js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'</span>;  
  24.     config.filebrowserFlashUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';  
  25.     config.filebrowserWindowWidth='1000';  
  26.     config.filebrowserWindowHeight='700';  
  27. };</span>  

 

5  復(fù)制這幾個(gè)jar包到WEB-INF/lib        （前面貼出的那兩個(gè)壓縮文件解壓之后有的

CKFinder-2.0.2.jar
CKFinderPlugin-FileEditor-2.0.2.jar
CKFinderPlugin-ImageResize-2.0.2.jar
Thumbnailator-0.3.3.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar

 

6 在jsp頁(yè)面寫(xiě)代碼：

<script type="text/javascript" src="${base}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base}/js/ckfinder/ckfinder.js"></script>

<textarea id="content" name="content"></textarea>

<script type="text/javascript">
 CKEDITOR.replace('content',{height:350});//設(shè)置編輯器高度
</script>


到此就大功告成啦,， 運(yùn)行截圖就是上面那3張！ 詳細(xì)的配置屬性請(qǐng)網(wǎng)上參考資料,，都在ckfinder-config.xml里,，可以控制上傳的文件類(lèi)型、大小,、能否刪除,、能否創(chuàng)建子文件夾等。

 

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布,，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買(mǎi)等信息,，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào),。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類(lèi)似文章 更多