精品伊人久久大香线蕉,开心久久婷婷综合中文字幕,杏田冲梨,人妻无码aⅴ不卡中文字幕

打開APP
userphoto
未登錄

開通VIP，暢享免費電子書等14項超值服

開通VIP

首頁

好書

留言交流

下載APP

聯系客服
ckeditor3.6.5+ckfinder2.0.2+jsp編輯器配置 支持服務器瀏覽/上傳圖片、Flash

             一、相信很多人都用過大名鼎鼎的FckEditor，   最新又出來了個ckEditor， 令人一下子搞不清楚， 到官方網站看看才知道FckEditor在2.6版本之后就改名為ckEditor了， 在這里特別說明一下， 以免混淆，因為網上搜出來的大多都是FckEditor相關配置的文章。

            二、FckEditor里有java版本的配置，相信有些同行用過，支持php、asp.net、java版本，現在一下子變為ckEditor了。配置簡單的編輯器很簡單，這里不多說了，我想大多數人都希望能用到編輯器里的瀏覽/插入圖片功能吧， 畢竟一條新聞沒個圖片說不過去。 當然我們自己做個上傳功能，然后復制URL地址插入到URL里也是可以的。 但是這樣客戶操作難度太高了。

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

 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';

需要自己寫這個上傳附件和瀏覽服務器文件的方法， 這哥們還真的自己寫了， 遺憾的是只給出部分代碼。  自己寫上傳文件和瀏覽文件夾雖然說不是什么難事， 但難免有些繁瑣費時。

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

這里方便大家下載我給個地址：

http://ckeditor.com/download

http://ckfinder.com/download       注意2.0.2版本以及以上的才支持java      （收費的）

 

先上個效果圖再貼代碼！

點擊插入圖片圖標

瀏覽/上傳圖片窗口

 

 

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

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

<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       如果超過這版本，servlet的類名不一樣小心！ 

  1. <span style="font-size:16px;">    <!-- ckeditor和ckfinder整合上傳圖片   開始 -->  
  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整合上傳圖片 結束 --></span>  


3 在建立文件WEB-INF/ckfinder-config.xml   內容如下（  紅色的 upload/ckfinder/代表工程里的路徑，可以對照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>  


目錄結構

 

4 修改/js/ckeditor/config.js里的內容如下：

[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  復制這幾個jar包到WEB-INF/lib        （前面貼出的那兩個壓縮文件解壓之后有的

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頁面寫代碼：

<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});//設置編輯器高度
</script>


到此就大功告成啦， 運行截圖就是上面那3張！ 詳細的配置屬性請網上參考資料，都在ckfinder-config.xml里，可以控制上傳的文件類型、大小、能否刪除、能否創建子文件夾等。

 

本站僅提供存儲服務，所有內容均由用戶發布，如發現有害或侵權內容，請點擊舉報。
打開APP，閱讀全文并永久保存 查看更多類似文章
猜你喜歡
類似文章
在JSP里使用CKEditor和CKFinder
CKEditor和CKFinder整合實現在線編輯功能
整合CKEditor和CKFinder(for java)
kfinder ckeditor組合PHP下配置 亂碼問題解決 單獨使用ckfinder的...
CKEditor3.0在asp.net環境下上傳文件的配置，集成CKFinder
PHP教程（30）文本編輯器+數據庫項目整合
更多類似文章 >>
生活服務
分享 收藏 導長圖 關注 下載文章
綁定賬號成功
后續可登錄賬號暢享VIP特權！
如果VIP功能使用有故障，
可點擊這里聯系客服！

聯系客服

主站蜘蛛池模板： 永安市| 甘谷县| 和龙市| 政和县| 青川县| 宜丰县| 莆田市| 福州市| 沧州市| 荔波县| 长泰县| 江永县| 顺昌县| 仁寿县| 泰顺县| 婺源县| 麦盖提县| 新绛县| 佛冈县| 阿克苏市| 宜兴市| 四会市| 额敏县| 五河县| 南宁市| 仁化县| 桑日县| 衡山县| 正定县| 渭源县| 科尔| 麻江县| 桂平市| 漠河县| SHOW| 滨海县| 朝阳县| 大田县| 鞍山市| 绍兴县| 望都县|