java与ckeditor和ckfinder整…

2024-05-26 01:58
文章标签 java ckeditor ckfinder

本文主要是介绍java与ckeditor和ckfinder整…，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

注意把网站上下文配到BaseURL中 否则插入文本的url有问题
原文地址：java与ckeditor和ckfinder整合后实现上传图片功能 作者：daring的美丽人生

最近在java项目中要用到图片上传功能，因为之前没接触过ckeditor在线编辑器，在网上也搜索了很多例子和使用方法，结合自己的项目做了出来，在此总结出来，希望对大家有所帮助

1，下载ckeditor_3.6.2.zip和ckfinder_java_2.1.zip，然后分别解压出来为ckeditor文件和ckfinder文件，

2，把解压出来的文件复制放在项目中webRoot目录下（注：ckfinder是复制解压出来的ckfinder文件下的CKFinderJava.war再解压后的CKFinderJava文件目录下的）

 

3，在jsp页面导入js
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>

然后在jsp页面中引入在线编辑器

             <textarea rows="20" cols="70" name="content"></textarea>
               <script type="text/javascript">
                 if( CKEDITOR.instances['content'] ){   //解决 例外被抛出且未被接住 问题  
                   CKEDITOR.remove(CKEDITOR.instances['content']);   
                   }    

                  var editor =CKEDITOR.replace("content");//引号中的字符串要和文本域中name的值一致
                 CKFinder.setupCKEditor(editor,'ckfinder/');
             
               </script>

4，配置config.xml文件

<config>

 <!-- 开启上传功能，如果为false为提示
 ：因为安全原因，文件不可浏览. 请联系系统管理员并检查CKFinder配置文件.
 并且默认你是是为false的 -->
 <enabled>true</enabled>

 <!-- 文件存放的地址    /ckfinder/userfiles/   (自动创建) -->
 <baseURL>/userfiles/</baseURL>
 
 
 <!--检查双扩展名   -->
 <checkDoubleExtension>true</checkDoubleExtension>
 
 <!-- 在缩放后检查大小 -->
 <checkSizeAfterScaling>true</checkSizeAfterScaling>
 

 <!-- 配置路径以及格式 -->
 <types>
  <type name="Files">
   <url>�SE_URL%files/</url>
   <directory>�SE_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,ppt

x,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>�SE_URL%images/</url>
   <directory>�SE_DIR%images</directory>
   <maxSize>0</maxSize>
   <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
   <deniedExtensions></deniedExtensions>
  </type>
  <type name="Flash">
   <url>�SE_URL%flash/</url>
   <directory>�SE_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>�SE_URL%_thumbs/</url>
  <directory>�SE_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>


5，配置web.xml文件
 <!-- =================ckeditor+ckfinder图片上传功能的配置=================== -->
   <servlet>
     <!-- servlet的命 名===注册名称，这个名称可以任意的        -->
  <servlet-name>ConnectorServlet</servlet-name>
  <!-- servlet 所在包  -->
  <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
  <init-param>
   <!-- 初始化设置 -->
   <param-name>XMLConfig</param-name>
   <param-value>/WEB-INF/config.xml</param-value>
  </init-param>
  <init-param>
   <!-- 设置是否可以查看debug，在正常时候需要设置为false. -->
   <param-name>debug</param-name>
   <param-value>false</param-value>
  </init-param>
  
  <!--
  
  load-on-startup 元素在web应用启动的时候指定了
  servlet被加载的顺序，它的值必须是一个整数。
  如果它的值是一个负整数或是这个元素不存在，
  那么容器会在该servlet被调用的时候，加载这个servlet
  。如果值是正整数或零，容器在配置的时候就加载并初始化这个servlet，
  容器必须保证值小的先被加载。如果值相等，容器可以自动选择先加载谁。

  
  在此不是必须的
   -->
  <load-on-startup>1</load-on-startup>
 </servlet>
 
 <!-- 映射的相对路径，主要是在其他地方使用，比如js,页面访问  -->
 <servlet-mapping>
  <servlet-name>ConnectorServlet</servlet-name>
  <url-pattern>
   /ckfinder/core/connector/java/connector.java
  </url-pattern>
 </servlet-mapping>

<!-- =================ckeditor+ckfinder图片上传功能的配置结束=================== -->

6，导入需要的jar包，放在lib目录下，这些jar包可以在下载的ckeditor文件和ckfinder文件里找到，如果没找到，也可在网上下载
ckeditor-java-core-3.5.3.jar
CKFinder-2.1.jar
CKFinderPlugin-FileEditor-2.1.jar
CKFinderPlugin-ImageResize-2.1.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
Thumbnailator-0.3.10.jar

7，配置上传路径

在webRoot/ckeditor/config.js中加入下面的内容：

CKEDITOR.editorConfig = function( config )
{

//加入的内容

// Define changes to default configuration here. For example:
 // config.language = 'fr';
 // config.uiColor = '#AADC6E';
 
 config.language = 'zh-cn'; // 配置语言
//
//    config.uiColor = '#fff'; // 背景颜色
//
      config.width = '800px'; // 宽度

      config.height = '300px'; // 高度
//
//    config.skin = 'office2003';// 界面v2,kama,office2003
//
//    config.toolbar = 'Full';// 工具栏风格Full,Basic
//   
//    config.font_names='宋体/宋体;黑体/黑体;仿宋/仿宋_GB2312;楷体/楷体_GB2312;' +
//    '隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+ config.font_names;

 //  config.htmlEncodeOutput = true;
 //config.startupOutlineBlocks = false;



 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';
 //---------------------------文件上传功能的配置结束--------
};

8，到此为止，java与ckeditor和ckfinder的配置已经完成，重启tomcat，重新打开项目就可看到页面上编辑器的文本框，此时点击图像就可以上传了

如图:点击浏览按钮，选择要上传的图片，然后点击上传到服务器上，在图像一栏中可以调节图片大小和位置，点击确定即可完成上传功能

[转载]java与ckeditor和ckfinder整合后实现上传图片功能

[转载]java与ckeditor和ckfinder整合后实现上传图片功能

[转载]java与ckeditor和ckfinder整合后实现上传图片功能

这篇关于java与ckeditor和ckfinder整…的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1003236。

相关文章

Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
JavaScript中的reduce方法执行过程、使用场景及进阶用法

JavaScript中的reduce方法执行过程、使用场景及进阶用法

《JavaScript中的reduce方法执行过程、使用场景及进阶用法》：本文主要介绍JavaScript中的reduce方法执行过程、使用场景及进阶用法的相关资料,reduce是JavaScri... 目录1. 什么是reduce2. reduce语法2.1 语法2.2 参数说明3. reduce执行过程
阅读更多...
如何使用Java实现请求deepseek

如何使用Java实现请求deepseek

《如何使用Java实现请求deepseek》这篇文章主要为大家详细介绍了如何使用Java实现请求deepseek功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1.deepseek的api创建2.Java实现请求deepseek2.1 pom文件2.2 json转化文件2.2
阅读更多...
Java调用DeepSeek API的最佳实践及详细代码示例

Java调用DeepSeek API的最佳实践及详细代码示例

《Java调用DeepSeekAPI的最佳实践及详细代码示例》：本文主要介绍如何使用Java调用DeepSeekAPI,包括获取API密钥、添加HTTP客户端依赖、创建HTTP请求、处理响应、... 目录1. 获取API密钥2. 添加HTTP客户端依赖3. 创建HTTP请求4. 处理响应5. 错误处理6.
阅读更多...
Spring AI集成DeepSeek的详细步骤

Spring AI集成DeepSeek的详细步骤

《SpringAI集成DeepSeek的详细步骤》DeepSeek作为一款卓越的国产AI模型,越来越多的公司考虑在自己的应用中集成,对于Java应用来说,我们可以借助SpringAI集成DeepSe... 目录DeepSeek 介绍Spring AI 是什么？1、环境准备2、构建项目2.1、pom依赖2.2
阅读更多...
Spring Cloud LoadBalancer 负载均衡详解

Spring Cloud LoadBalancer 负载均衡详解

《SpringCloudLoadBalancer负载均衡详解》本文介绍了如何在SpringCloud中使用SpringCloudLoadBalancer实现客户端负载均衡,并详细讲解了轮询策略和... 目录1. 在 idea 上运行多个服务2. 问题引入3. 负载均衡4. Spring Cloud Load
阅读更多...
Springboot中分析SQL性能的两种方式详解

Springboot中分析SQL性能的两种方式详解

《Springboot中分析SQL性能的两种方式详解》文章介绍了SQL性能分析的两种方式：MyBatis-Plus性能分析插件和p6spy框架,MyBatis-Plus插件配置简单,适用于开发和测试环... 目录SQL性能分析的两种方式:功能介绍实现方式:实现步骤:SQL性能分析的两种方式:功能介绍记录
阅读更多...
在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

在 Spring Boot 中使用 @Autowired和 @Bean注解的示例详解

《在SpringBoot中使用@Autowired和@Bean注解的示例详解》本文通过一个示例演示了如何在SpringBoot中使用@Autowired和@Bean注解进行依赖注入和Bean... 目录在 Spring Boot 中使用 @Autowired 和 @Bean 注解示例背景1. 定义 Stud
阅读更多...
如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解

《如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别详解》：本文主要介绍如何通过海康威视设备网络SDK进行Java二次开发摄像头车牌识别的相关资料,描述了如何使用海康威视设备网络SD... 目录前言开发流程问题和解决方案dll库加载不到的问题老旧版本sdk不兼容的问题关键实现流程总结前言作为
阅读更多...
SpringBoot中使用 ThreadLocal 进行多线程上下文管理及注意事项小结

SpringBoot中使用 ThreadLocal 进行多线程上下文管理及注意事项小结

《SpringBoot中使用ThreadLocal进行多线程上下文管理及注意事项小结》本文详细介绍了ThreadLocal的原理、使用场景和示例代码,并在SpringBoot中使用ThreadLo... 目录前言技术积累1.什么是 ThreadLocal2. ThreadLocal 的原理2.1 线程隔离2
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2