CKEditor+CKFinder for java (上传文件、上传视频、添加行距编辑等等)

      

         CKEditor 、CKFinder    相互融合要注意的细节的确很多，因为功能的强大和界面的优势，花费一些时间整合还是有意义的。

          下载插件：

       CKEditor  ： http://ckeditor.com/

       CKFinder  ：http://ckfinder.com

      分别解压后，添加到项目中，复制CKFinder   lib 下面的所有jar 到项目的lib 目录

   1.   CKFinder 下面有一个config.xml 文件 复制到 项目中  最好放在WEB-INF下面

     config.xml：

  <config>
<enabled>true</enabled>
<baseDir></baseDir>//
<baseURL>upload/ckfinder</baseURL>//上传文件的地址
<licenseKey></licenseKey>
<licenseName></licenseName>
<imgWidth>1600</imgWidth>
<imgHeight>1200</imgHeight>
<imgQuality>80</imgQuality>
<uriEncoding>UTF-8</uriEncoding>
<forceASCII>false</forceASCII>
     <disallowUnsafeCharacters>false</disallowUnsafeCharacters>
<userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
<checkDoubleExtension>true</checkDoubleExtension>
<checkSizeAfterScaling>true</checkSizeAfterScaling>
<secureImageUploads>true</secureImageUploads>
<htmlExtensions>html,htm,xml,js</htmlExtensions>
<hideFolders>
<folder>.svn</folder>
<folder>CVS</folder>
</hideFolders>
<hideFiles>
<file>.*</file>
</hideFiles>
<defaultResourceTypes></defaultResourceTypes>
<types>
<type name="Files">
<url>%BASE_URL%files/</url>
<directory>%BASE_DIR%files</directory>
<maxSize>0</maxSize>
<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
</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Images">
<url>%BASE_URL%images/</url>
<directory>%BASE_DIR%images</directory>
<maxSize>0</maxSize>
<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Flash">
<url>%BASE_URL%flash/</url>
<directory>%BASE_DIR%flash</directory>
<maxSize>0</maxSize>
<allowedExtensions>swf,flv</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
</types>
<accessControls>
<accessControl>
<role>*</role>
<resourceType>*</resourceType>
<folder>/</folder>
<folderView>true</folderView>
<folderCreate>true</folderCreate>
<folderRename>true</folderRename>
<folderDelete>true</folderDelete>
<fileView>true</fileView>
<fileUpload>true</fileUpload>
<fileRename>true</fileRename>
<fileDelete>true</fileDelete>
</accessControl>
</accessControls>
<thumbs>
<enabled>true</enabled>
<url>%BASE_URL%_thumbs/</url>
<directory>%BASE_DIR%_thumbs</directory>
<directAccess>false</directAccess>
<maxHeight>100</maxHeight>
<maxWidth>100</maxWidth>
<quality>80</quality>
</thumbs>
<plugins>
<plugin>
<name>imageresize</name>
<class>com.ckfinder.connector.plugins.ImageResize</class>
<params>
<param name="smallThumb" value="90x90"></param>
<param name="mediumThumb" value="120x120"></param>
<param name="largeThumb" value="180x180"></param>
</params>
</plugin>
<plugin>
<name>fileeditor</name>
<class>com.ckfinder.connector.plugins.FileEditor</class>
<params></params>
</plugin>
</plugins>
<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>

  上面的其他配置可以根据自己的需要去修改

2. 修改ckeditor 下面的comfig.js文件  （以下是主要的代码）  注意下面添加行距标签的地方

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

    config.language = 'zh-cn'; // 配置语言  
    config.uiColor = '#FFF'; // 背景颜色  
    config.image_previewText=''; //预览区域显示内容
      //  config.width = 'auto'; // 宽度  
    config.height = '500px'; // 高度  
    config.skin = 'office2003';//界面v2,kama,office2003  
    config.toolbar = 'Full';// 工具栏风格Full,Basic  
config.extraPlugins += (config.extraPlugins ? ',lineheight' : 'lineheight');
   /* CKEDITOR.config.toolbar_Full =
    [
        { name: 'document',        items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
        { name: 'clipboard',    items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
        { name: 'editing',        items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
        { name: 'forms',        items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
        '/',
        { name: 'basicstyles',    items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
        { name: 'paragraph',    items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
        { name: 'links',        items : [ 'Link','Unlink','Anchor' ] },
        { name: 'insert',        items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
        '/',
        { name: 'styles',        items : [ 'Styles','Format','Font','FontSize','lineheight' ] },
        { name: 'colors',        items : [ 'TextColor','BGColor' ] },
        { name: 'tools',        items : [ 'Maximize', 'ShowBlocks','-','About' ] }
    ];*/
    config.toolbar_Full =
    [
        ['Source','-','Save','NewPage','Preview','-','Templates'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
        '/',
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['Link','Unlink','Anchor'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
        '/',
        ['Styles','Format','Font','FontSize','lineheight'],
        ['TextColor','BGColor'],
        ['Maximize', 'ShowBlocks','-','About']
    ];
  
    config.toolbar_Basic =
     [
     ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
     ];
     

3.页面的设置

  <1>    

      头部加入： <%--  <%@ taglib uri ="http://ckeditor.com" prefix="ck" %> --%>//这句可以不要，因为很多人加入进去都会报错   可以用来另外一种写法代替
                <%@ taglib uri = "http://ckfinder.com" prefix="ckf" %>

  <2>

     引入文件：

           <script type="text/javascript" src="<%=path %>/scripts/ckeditor/ckeditor.js"></script>
          <script type="text/javascript" src="<%=path %>/ckfinder/ckfinder.js"></script>
          <script src="<%=path %>/scripts/ckeditor/_samples/sample.js" type="text/javascript"></script>
          <link href="<%=path %>/scripts/ckeditor/_samples/sample.css" rel="stylesheet" type="text/css" />

 

  <3>

       <textarea cols="80" id="editor_kama" name="club.introduce" rows="50"  ></textarea>
                <ckf:setupCKEditor  basePath="../ckfinder/"  editor="editor_kama"/>
               <script type="text/javascript">
             CKEDITOR.replace( 'editor_kama', {skin : 'kama' });
                </script>

    基本上就是这样，但是在上传的过程中，可能会遇到不能上传的问题， 因为ssh整合的过程了可能配置了servlet 拦截去， 所以应该在struts.xml中取消对此的拦截。

。。。。。。。。。。。。。。